はじめに

コンポーネントの型としてReact.VFCを書こうとすると下記のエラーがでた。
Namespace 'React' has no exported member 'VFC'.ts(2694)
React.FCなど種類があることは知っていたが、使い分けなど詳細を把握していなかったので、ここに記録します。

結論

今後、React.FCが主流となっていくようなので、基本これを使っていれば良い。
React v18 からはReact.VFCの方は非推奨になったので使わないようにする。

詳細

元々、React.FCではchildrenが最初から暗黙的に定義されており、propsの定義にchildrenを渡していない状態で、childrenを使用してもエラーになりませんでした。
↓

これは良くない、ということでchildrenが含まれないReact.VFCが一時的に用意された。

これで、childrenが必要な場合は

interface Props {
  name: string;
  children: React.ReactNode;
}

とchildrenを明示的に定義することが必須となった。
↓

React v18 からはReact.FunctionComponent (FC), React.Component に暗黙的に含まれていた children が除かれ、React.VFCの方は非推奨になった。

おわりに

曖昧だった理解を深めるいい機会となった。
React.VFCとの関係以外に、React.FC と JSX.Element どちらを使うのか、というお話もあるようだが、自分の主観ではコンポーネントの型にはReact.FCが使われていることが多いように思う。