はじめに
React.FC型を使うことが絶対に悪いことだと言う記事ではありません。
ただ、React.FC型を使うことにもいくつかデメリットもあり、React.FC型をあえて使っていないプロジェクトが多く存在します。
今回はそんなReact.FCについて書いていきます。
React.FCとは
type Props = {
hoge:string
}
const Component:React.FC<Props> = ({hoge}) => {
return (
<div>{hoge}</div>
)
}
React.FC
はReactの関数コンポーネントを定義するための型です。
ジェネリクスにpropsの型を入れられます。
React.FCを使わなくても書ける
type Props={
hoge:string
}
const Component = ({hoge}:Props) => {
return (
<div>{hoge}</div>
)
}
型定義だけしたい場合
type Component = (props: Props) => JSX.Element
React.FCのデメリット1:ジェネリクスが使えない
再利用しやすくするためにPropsの型をジェネリクスで渡したいときどうすればよいでしょうか。
type Props<T> = {
hoge:T
}
const ParentComponent = () => {
return <Component<number> hoge={1}/>;
//どうやって型をComponentに渡す?
}
React.FC
を使うと下記のどれでも実現できません。
const Component<T>:React.FC<Props<T>> = ({hoge}) => {}
const Component:React.FC<Props<T>> = <T>({hoge}) => {}
const Component:React.FC<Props<T>> = function <T>({hoge}){}
ラッパー関数を使えば実現できなくもないですが、さすがに不便です。
React.FC
を使わない場合はどうでしょうか。
この場合はTyescriptの知識がある程度ある方には簡単でしょう。
function Component<T>({hoge}:Props<T>){}
React.FCのデメリット2:childrenが必要かどうかわからない
React.FCを使うと関数コンポーネントのPropsにchildren
が元から入っています。
逆に言うとchildren
が必要がない場合でも、children
に値を入れることができます。
children
が必要なのか分からず、間違えて入れてしまってもエラーが出ないのです。
なんのためにTypescriptを使っているのか分かりませんね。
type Props = {
hoge:string
}
const Component:React.FC<Props> = ({hoge}) => {
return (
<div>{hoge}</div>
)
}
const ParentComponent = () => {
return (
<Component hoge={""}>
<div>fuga</div>
//childrenは必要ないのにエラーが出ない
</Component>
);
}
childrenが必要かどうかはちゃんと明記したいですよね。
type Props = {
hoge:string
children: React.ReactNode
}
React.FCのデメリット3:将来的に大丈夫?
最後は現在に起こっている問題ではありませんが、今後ReactがアップデートをしReact.FCが使用できなくなったり非推奨になる可能性があるかもしれません。
そんなことあり得るのか、と思うかもしれませんがReact.SFC
が実際にver16.7で非推奨になっています。
最後に
皆さんもReact.FCを使わないReact+typescript開発をしてみてはいかがでしょうか?
2021/3/03追記
React18からReact.FCからchildrenは外されるそうです。
それに伴い、React.VFCは非推奨になるかも?