React.FCとは？

React.FC を使うパターン

コンポーネントが受け取るpropsとReact.FCを使ってコンポーネントの型を定義する。

import React from 'react'

type Props = {
  name: string;
};

const Component: React.FC<Props> = ({ name }) => {
  return <h1>Hello {name}</h1>;
};

export default Hoge

React.FC を使わない書き方

関数の引数と戻り値の型を個別にしていした関数としてコンポーネントを定義する。

type Props = {
  name: string;
};

const Component = ({ name }: Props): React.JSX.Element => {
  return <h1>Hello {name}</h1>;
};

export default Hoge

最近では、React.FC の使用を避けることが推奨されている。
・ジェネリクス(型パラメーター)が使えないから。
・children を含めたい場合は明示的に定義した方が良い。
・関数の戻り値が JSX.Element だと明示的にできる。