Reactコンポーネントの型にはReact.FCよりもJSX.Elementを使うべきなのか
個人的な気持ち
返り値の型を明示的な書くならReact.FCの方が好き
返り値の型を書かずにTypeScriptに推論させるならJSX.Elementでもいいかも
React.FCよりもJSX.Elementのほうが良いという文脈でよく言われていること
FCだと使えるプロパティがいくつかあるけど使う場面無い問題
propTypesとかTypeScriptあれば使うこと無い
個人的にはこれが一番しんどくて納得しかけている
React.FC、個人的にはコードがスッキリ見える気がしていて好きだった
code:react-fc.tsx
type Props = {
title: string;
}
const Component: FC<Props> = ({ title }) => {
return <div>{title}</div>;
}
逆に言えばスッキリ見える以外にReact.FCを使う理由が無い?
書いてみると別にJSX.Elementでも悪くないなという気がしてきたな
code:jsx-element.tsx
type Props = {
title: string;
}
const Component = ({ title }: Props) => {
return <div>{title}</div>;
}
FCで統一する場合Props有無に関わらずimport { FC } from 'react'の一文を書かないといけない
スッキリかけるというのが思い込みだったのでは?
いや、返り値の型を明示的に書かない場合() => JSX.Element | nullになる可能性があるけどそればいいのかな
条件によってnullを返すみたいなことはよくやる
もし仮に返り値の型を明示的に書くなら
code:tsx
type Props = {
title: string;
}
const Component = ({ title }: Props): JSX.Element | null => {
return <div>{title}</div>;
}
これは嫌だな
返り値の型を推論させるならJSX.Elementでもいいかもという感想だった
参考