React 18で関数コンポーネントReact.FCからchildrenが消えた

誰に向けて？

「プロパティ 'children' は型 '{}' に存在しません」と言われて焦っている、React, TypeScript初学者向け。

関数コンポーネントにてchildrenを明示しないとエラーになる

気がついたらReactがバージョン18になっていました。
（2022年3月29日npmに公開らしい）

18、、ついに成人したのですかね？（年齢ではない）

そして、関数コンポーネントでは以下のようなエラーが出るように。

// エラー:「プロパティ 'children' は型 '{}' に存在しません。」と怒られる
export const Hoge: React.FC = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

結論から言うとReact18から、以下のように明示的にchildrenを定義してやる必要があるそうです。

// childrenを明示してやる
// ?をつけるとオプショナル型となり、渡しても渡さなくてもいいように
type Props = {
  children?: React.ReactNode;
};

export const Hoge: React.FC<Props> = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

なぜこのような仕様に？

もともとは、関数コンポーネント（Function Component）にReact:FCの型を当ててやると、暗示的にchildrenを渡せるようになっていました。

しかしこの仕様だと、childrenとして何か渡した方がいいのか判断できないとか、実はchildren使われてないので渡しても意味ないとか、不要なのにchildren含まれてて気持ち悪い、childrenとして渡せるものの種類が多いなどなど面倒があったのですね。

そこで、React.VFCというchildrenを持たない関数コンポーネントの型が生み出されました。

そしてついに、React 18でReact.FCにもchildrenが含まれなくなったのでした。

この一連の流れを、子供たち(children)の(型)安全を守ろう運動と言う、言わない。

childrenに関して、過去記事を参考にするときは注意ですね。

参考

https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc
Thanks