Reactの関数を定義する際に利用するFCについて理解が薄かったので調べてみました！
FCってなに？
Reactでコンポーネントを定義する際によく登場する型の定義です。
import { FC } from 'react'
type Props = {
text: string
}
const Component:FC<Props> = ({ text }) => {
return <p>{text}</p>
}
FCは、FunctionComponentで定義は下記のようになっています。
type FC<P = {}> = FunctionComponent<P>;
interface FunctionComponent<P = {}> {
(props: P, context?: any): ReactElement<any, any> | null;
propTypes?: WeakValidationMap<P> | undefined;
contextTypes?: ValidationMap<any> | undefined;
defaultProps?: Partial<P> | undefined;
displayName?: string | undefined;
}
FCを利用することのメリット
こんなメリットがあるんではなかろうか？
というのをいくつか書いていきます。
それは違うぞ！って方はぜひコメントをください！
メリット①関数コンポーネントであることを明示的に示せる
型を縛るという意味では、それほど大きなメリットではないと感じています。
定義してあればReactNode以外の型を返そうとした場合にエラーを出してくれます！
type Props = {
children: ReactNode;
date: Date;
}
const Component: FC<Props> = ({ children, date }) => {
return <p>{date}</p>;
// 型 'Date' を型 'ReactNode' に割り当てることはできません。
};
export default Component;
ReactNode以外だとエラーになりますと伝えましたが、返り値がstringの場合は、エラーが出ないので注意ください…。
メリット②ジェネリクスをサポートしているのでプロパティの型を渡せる
type Props = {
name: string;
}
const Component: FC<Props> = ({ name }) => {
return <p>{name}</p>;
};
なぜFCはいらないと言われているのか？
調べるとFCは必要ない！みたいな記事が出てきます。
いらないと言われる理由を考えてみました。
FCを利用しなくても書ける
先ほどのコードも下記のように記述できます。
type Props = {
name: string;
}
const Component = ({ name }: Props) => {
return <p>{name}</p>;
};
上記でも問題なく動作しまが、返り値の方についてはお任せしている状態となります。
上記のコードの型は下記のようになります。
const Component: ({ name }: Props) => JSX.Element
技術的な知識や技量レベルの同じ人が開発続ける保証はないので、明示的に方を定義しておいた方がいいと考えています。
シンプルで短いコードやテストコードがあるなら書かなくてもいいのでは？という考え方もあると思うのでチームですり合わせをオススメします！
昔はFCに暗黙的なchildrenが含まれていて扱いにくかった
React.FCには暗黙的にchildrenが含まれてました。
React18からは暗黙的にchildrenが含まれなくなりchildrenの利用が分かりにくい点は解消されていますが、その流れで利用しない風潮が残っている可能性はあるかもしれません。
当時暗黙的にchildrenが含まれないVFCという指定もありましたが、React18でのアップデートによりVFCからFCに書き換えるタスクが発生しました…。
その時の辛さからわざわざ指定しなくてもいいのなら書かないという発想も理解できます。
【Reactの関数コンポーネントを定義する時に利用するFCってなに？】まとめ
技術レベルの差に関係なく開発できる環境を作るのであれば、明示的に指定してエラーを出すコードを書いておける方がいいのかと思っています。
テストコードさえあれば厳格な型定義しなくても良いと思うので、チームの思想や体制によるところかもしれません。
チーム全体でFCの利用について方針はすり合わせておけると良いなと感じました。
参考記事