0
0
テーマ、知りたいこと
コンポーネント等の定義時にReact.FCは使うべきなのか？
背景、状況
当方、Webフロントエンジニアでここ数年はReact + Next.jsの環境で開発することが多いです。
漠然とコンポーネント定義時にReact.FCを型として利用しているがふと 「これでいいのか？」 と疑問に思い、色々調べてみると非推奨の文字が目立つなぁと感じました。
色々記事を見ているとJSX.Element でいいという一方で明示的にFCを指定するほうが良いという意見が見受けられそれも2〜3年前の記事だったりなので、直近の皆さんの所感を知りたいなぁと思い議論できればと思います。
よろしくお願いいたします。
一旦環境としては、React 18環境での扱いについて議論できれば良いなぁと思います。
（もちろん過去のいついつまではこっちが推奨みたいな議論は大歓迎なので環境を恐れず議論できればとは思います。）
回答3件
#1
総合スコア230
投稿2024/07/06 03:49
私は、React.FC に暗黙の children があった時代には React.VFC を使っていましたが、その問題が解決したので React.FC を使っています。
React.FC を使わない場合については、 返り値の型は JSX.Element ではなく ReactNode のほうが良い場合が多いと思います。
たぶん、<input> をラップした atom レベルのコンポーネントであれば、 JSX.Element が役に立ちそうですが、
そうでない場合は、ReactFragment や文字列、数値を返すことができますし、React Server Component を使うときには Promise を返すことも許されるので、それらも包摂する型 ReactNode にしたほうが良いと思います。
実際に、React.FC の返り値も、TypeScript 5.1 のころに ReactNode に変わっています。
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
#2
@honey32さん
React.FC を使わない場合については、 返り値の型は JSX.Element ではなく ReactNode のほうが良い場合が多いと思います。
あーなるほどReactNodeを直接指定ですか
質問なのですが、React.FCの時は以下のように実装するのですが、ReactNodeの場合ってpropsの型とかってどう当てるんでしょう？ジェネリクスで指定できないですよね？
tsx
1type Props = { 2 text: string 3} 4 5const Component: FC<Props> = (props) => { 6 return <p>{ props.text }</p> 7} 8 9export default Component
こういう実装になるのでしょうか？
tsx
1type Props = { 2 text: string 3} 4 5const Component: ReactNode = (props: Props) => { 6 return <p>{ props.text }</p> 7} 8 9export default Component 10
#3
総合スコア230
投稿2024/07/12 12:08
@3sanku9 さん
こういう実装になるのでしょうか？
はい。引数を単純に Props と明示するだけになります。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。