React.FC or JSX.Element

今更の React v18 : children の扱いが変わった (TypeScript) - かもメモ

読んだ。

React v18 へのアップデートの話だけど、直近で React.FC と JSX.Element のどっちを使えばいいのかを考える機会があったので参考になった。

記事自体は5月のものだがはてブのテクノロジーカテゴリに最近上がっていた。

結論としてはどっちでもいいというもので、前からあった React.VFC が非推奨になり、代わりに React.FC がその機能を受け継ぐという感じになる。

chidren を渡すときに明示的に定義しないと怒られる。

で、じゃあ React.FC と JSX.Element の違いはというとほとんどなくて React.FC が JSX.Element | null を返せるということだけ。なのでどっちを使ってもよさそう。

この記事にもある通り props の型定義をジェネリクスで渡せて見た目がスッキリしているのは React.FC のほうなので、個人的にはこっちのほうが好みかも。