React.VFC を使うべき理由

React.VFC を使った方が良い理由についてまとめてみた。

---

React.VFC とは

Function Componentを定義するための型である React.FC はchildrenが最初から暗黙的に定義されてしまっているため、必要ないのにchildrenを渡してしまってもエラーにならない仕様になっている。これでは暗黙的に許可してしまうため実際に渡っているのか渡っていないのかがわからない。

そこで @types/react v16.9.48 からはReact.VFC が追加されており、こちらではchildrenが含まれない。なので未定義の状態でchildrenを渡した場合、errorを出してくれる。

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643

サンプルコード

export type Props = {
  text: string;
};

const Fuga: React.VFC<Props> = (props) => {
  return (
    <div>
      <p>{props.text}</p>
    </div>
  );
};

export const Hoge: React.VFC = () => {
  return (
    <div>
      <Fuga text={"テキスト"}>children</Fuga>
    </div>
  );
};

このように書くと以下のようなerrorが出てくれる。

型 '{ children: string; text: string; }' を型 'IntrinsicAttributes & Props' に割り当てることはできません。
  プロパティ 'children' は型 'IntrinsicAttributes & Props' に存在しません。ts(2322)

上記のようにchildrenを渡したい場合は childrenを明示的に定義してあげると良い。

export type Props = {
  text: string;
  children: React.ReactNode;
};

const Fuga: React.VFC<Props> = (props) => {
  return (
    <div>
      <p>{props.text}</p>
    </div>
  );
};

export const Hoge: React.VFC = () => {
  return (
    <div>
      <Fuga text={"テキスト"}>children</Fuga>
    </div>
  );
};

このように書くとerrorは出なくなります。

まとめ

今 React × TSで開発するのであれば、React.VFC を使うようにする。