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の利用について方針はすり合わせておけると良いなと感じました。
参考記事