Reactを書いていると見かけるFCとVFCがいまいち理解できていなかったけどようやく理解できた気がします。
結論、React18以降のプロジェクトではこのような記述を見かけることはないはずです.
React18以前からプロジェクトにReactを導入されている場合に記述が混在している状態になっている可能性もあります。
FCとVFCが何で、どうするのが良いのかを理解しておくのが無難だと考えています。
レガシーコードを残さないためにも理解して淘汰していけるように心がけましょう！
FCとVFCの違い
React17以前ではFCを定義すると暗黙的にchildrenがpropsの中で定義され定義され、VFCでは定義されませんでした。
childrenを含むコンポーネントはFC、そうでないコンポーネントはVFCを利用するのが基本だったようです。
React18以降ではVFCが非推奨になり、FCから暗黙的childrenが削除されました。
現在は、propsに対して型を明示するのが一般的だそうです。
type A = {
text: string;
children: React.ReactNode;
}
- const B: React.FC<A> = (props) => {}
+ const B = (props:A) => {}
詳細には理解できていませんが、上記のように記述するのはFCのdefaultPropsは非推奨、displayNameは使われないのとpropsの型定義にジェネリクスを使うとFCに適切な型を定義できないなどの理由でFCを利用するケースが減ってきているそうです。
FCのdefaultPropsやdisplayNameについて
現在ではdefaultPropsは非推奨、displayName明示的に設定する必要はないとされているそうです。
バージョンアップする際は気をつけたいですね…。
そしてこれから新しいバージョンでプロジェクトを作成する時は古い書き方にならないように注意したいと思います。