React.FC の使用と非使用

React.FC（Function Component）は、関数コンポーネントのためのReactの型定義。React 17以前では、React.FC を使用すると、children プロパティが自動的に含まれる。

React.FCを使う場合

React 17以前では、React.FCを使用すると、children の型指定を省略でき、コードがすっきりする。

type Props = {
  name: string;
};

const MyComponent: React.FC<Props> = ({ name, children }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {children}
    </div>
  );
};

React.FCを使わない場合

React.FCを使用しない場合、また、React 18以降では、children の型を明示的に指定する必要がある。

type Props = {
  name: string;
  children: React.ReactNode;
};

const MyComponent = ({ name, children }: Props) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {children}
    </div>
  );
};

React 17以前で、childrenがいらない場合は、React.FC を使う必要はない。使うか使わないかは、チームの方針に従うのが大切。