Zenn
Open2

React+TypeScript メモ

きょんきょん

なぜReact.FC(React.FunctionComponent)が非推奨なのか

  • 関数コンポーネントで暗黙的にchildrenが宣言され、引数に受け取れてしまうため。
  • 代わりにReact.VFC(React.VoidFunctionComponent)の使用を推奨している
type Props = { foo: string };

// OK now, in future, error
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// Error now, in future, deprecated
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {
  return (
    <div>
      {foo}
      {children}
    </div>
  );
};