Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@islandryu

React.FC使う必要ある?

はじめに

React.FC型を使うことが絶対に悪いことだと言う記事ではありません。

ただ、React.FC型を使うことにもいくつかデメリットもあり、React.FC型をあえて使っていないプロジェクトが多く存在します。
今回はそんなReact.FCについて書いていきます。

React.FCとは

type Props = {
    hoge:string
}

const Component:React.FC<Props> = ({hoge}) => {
    return (
        <div>{hoge}</div>
    )
}

React.FCはReactの関数コンポーネントを定義するための型です。
ジェネリクスにpropsの型を入れられます。

React.FCを使わなくても書ける

type Props={
    hoge:string
}

const Component = ({hoge}:Props) => {
    return (
        <div>{hoge}</div>
    )
}

型定義だけしたい場合

type Component = (props: Props) => JSX.Element

React.FCのデメリット1:ジェネリクスが使えない

再利用しやすくするためにPropsの型をジェネリクスで渡したいときどうすればよいでしょうか。

type Props<T> = {
  hoge:T
}

const ParentComponent = () => {
  return <Component<number> hoge={1}/>;
  //どうやって型をComponentに渡す?
}

React.FCを使うと下記のどれでも実現できません。

const Component<T>:React.FC<Props<T>> = ({hoge}) => {} 
const Component:React.FC<Props<T>> = <T>({hoge}) => {} 
const Component:React.FC<Props<T>> = function <T>({hoge}){}

ラッパー関数を使えば実現できなくもないですが、さすがに不便です。

React.FCを使わない場合はどうでしょうか。
この場合はTyescriptの知識がある程度ある方には簡単でしょう。

function Component<T>({hoge}:Props<T>){}

React.FCのデメリット2:childrenが必要かどうかわからない

React.FCを使うと関数コンポーネントのPropsにchildrenが元から入っています。
逆に言うとchildrenが必要がない場合でも、childrenに値を入れることができます。
childrenが必要なのか分からず、間違えて入れてしまってもエラーが出ないのです。
なんのためにTypescriptを使っているのか分かりませんね。

type Props = {
    hoge:string
}

const Component:React.FC<Props> = ({hoge}) => {
    return (
        <div>{hoge}</div>
    )
}

const ParentComponent = () => {
  return (
    <Component<number> hoge={""}>
      <div>fuga</div>
      //childrenは必要ないのにエラーが出ない
    </Component>
  );
}

childrenが必要かどうかはちゃんと明記したいですよね。

type Props = {
  hoge:string
  children: React.ReactNode
}

React.FCのデメリット3:将来的に大丈夫?

最後は現在に起こっている問題ではありませんが、今後ReactがアップデートをしReact.FCが使用できなくなったり非推奨になる可能性があるかもしれません。
そんなことあり得るのか、と思うかもしれませんがReact.SFCが実際にver16.7で非推奨になっています。

最後に

皆さんもReact.FCを使わないReact+typescript開発をしてみてはいかがでしょうか?

2021/3/03追記

React18からReat.FCからchildrenは外されるそうです。
それに伴い、React.VFCは非推奨になるかも?

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
islandryu
typescriptをよく使います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?