React.FC使う必要ある？ #JavaScript

はじめに

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 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からReact.FCからchildrenは外されるそうです。
それに伴い、React.VFCは非推奨になるかも？