Zenn
Open3

React Componentの FC, VFCについて

React
TypeScript
frontend
component
まさぴょんまさぴょん

React Componentの FC, VFC の違いとは？

React コンポーネントにおける FC と VFC の違い

まず、React.FC と React.VFC は、React が提供する型定義で、それぞれ関数コンポーネントを型付けするために使われます。

  • React.FC（または React.FunctionComponent）:

    • 初期の頃は、children プロパティが自動的に含まれていました。そのため、コンポーネントが明示的に children を受け取らなくても、型定義上は children が存在することになり、意図しないバグを引き起こす可能性がありました。
    • また、defaultProps や propTypes などのレガシーな機能も含まれており、現在ではあまり推奨されていません。

  • React.VFC（または React.VoidFunctionComponent）:

    • children プロパティを含まない関数コンポーネントを型付けするために導入されました。
    • しかし、TypeScript と React のアップデートにより、React.FC でも children が自動的に含まれないように変更され、React.VFC は 非推奨 となりました。

まとめ

  • React.FC と React.VFC の違い: React.VFC は children を含まないコンポーネントのための型でしたが、現在は非推奨です。React.FC は以前 children を自動的に含んでいましたが、最新のバージョンでは含まれなくなりました。
  • Props の型定義のベストプラクティス: 独自に Props の型を定義し、コンポーネントでそれを使用する方法が推奨されます。React.FC や React.VFC を使う必要はありません。

これにより、コードの可読性と型安全性が向上し、将来的なメンテナンスも容易になります。

まさぴょんまさぴょん

Propsの型定義は、どのようにするのがBestか？

結論: React Componentの FC, VFCは非推奨

Props の型定義のベストプラクティス

現在のベストプラクティスでは、以下のように 明示的に Props の型を定義 し、コンポーネントに適用することが推奨されています。

type MyComponentProps = {
  // Props の定義
  title: string;
  onClick: () => void;
};

const MyComponent = (props: MyComponentProps) => {
  const { title, onClick } = props;

  return (
    <button onClick={onClick}>
      {title}
    </button>
  );
};

理由:

  • 明示的な型定義: Props の型を明示的に定義することで、コードの可読性と保守性が向上します。
  • 余計な機能の排除: React.FC を使うと、不要な機能や型（例えば children や defaultProps）が含まれる可能性があります。
  • 柔軟性の向上: 関数コンポーネントを通常の関数として定義することで、型システムの柔軟性を最大限に活用できます。
まさぴょんまさぴょん

参考リンク

  1. React TypeScript Cheatsheets
    React TypeScript Cheatsheets - Function Components
    このサイトでは、TypeScript と React を組み合わせる際のベストプラクティスが詳しく説明されています。特に、React.FC の使用に関する推奨事項や、Props の型定義方法が記載されています。

  2. TypeScript Deep Dive - React and TypeScript
    TypeScript Deep Dive - React and TypeScript
    React.FC の利点と欠点、そしてなぜ明示的な Props の型定義が推奨されるのかについて解説されています。

  3. React の公式ドキュメント（TypeScript のサポート）
    React Documentation - TypeScript Support
    公式ドキュメントでは、TypeScript と React の組み合わせ方や、コンポーネントの型定義について基本的な情報が提供されています。

  4. GitHub Issue: React.FC に関する議論
    DefinitelyTyped - Issue #33006
    React.FC に関連する型定義の問題や、children プロパティの扱いについての議論が行われています。

  5. 記事: React.FC を使うべきではない理由
    Why You Don't Need to Use React.FC
    React.FC を使用しない方が良い理由と、その代わりにどのようにコンポーネントを型付けすべきかが説明されています。

これらのリソースを参照することで、より詳細な情報や背景を理解することができます。特に、TypeScript と React を組み合わせる際の最新のベストプラクティスについて学ぶのに役立ちます。