React FCが使わない流れがきてるっぽい

Posted at 2025-05-22

はじめに

業務でTypeScriptを記述していて、フロントエンドの設計方針についてどうするか議論した。

現場のフロントエンドエンジニアと話をしていたところ、近年は、TypeScriptのReact FCという記述を使わなくなっているということを耳にしたので記事にあらためておきたい。

Function Component（関数コンポーネント）の略で、Reactの関数コンポーネントに型をつけるための型定義の一つとされています。

.tsx

type Props = {
  text: string;
};

const MyComponent: React.FC<Props> = ({ text }) => {
  return <p>{text}</p>;
};

この関数は「Reactのコンポーネントだよ〜」っていうのを伝えるのに使用されますよね。（書いた本人が納得しているが....）

これを定義することで....

などといったメリットがあります。

React.FCは、React18以降のプロジェクトで、見かけなくなっているようです。

childrenがReact17までは含まれていたものの、React18以降では含まれなくなりました。

コンポーネントの中身の要素を含むプロパティが不要なときにも使わらなくてはならなくなったこともあり、自動に含まれないことでより柔軟性が増したのではないでしょうか？

.tsx

/** React17まで */
type Props = {
  text: string;
};

const MyComponent: React.FC<Props> = ({ text }) => {
  return <p>{text}</p>;
};

.tsx

/** React18以降 */
type Props = {
    text: string
};

const MyComponent = ({ text }: Props) => {
    return <p>{text}</p>
};

Reactのバージョンが1つ違うだけでこんなに違うものですね。

VFCはVoid Function Component の略で、React.FCと似たように関数コンポーネントの型を定義するためのもの。

ただし、FCとの大きな違いは「children（子要素）」をpropsに自動で含めないという点です。

.tsx

type Props = { title: string };

// childrenを受け取らない場合
const MyComponent: React.VFC<Props> = ({ title }) => {
  return <div>{title}</div>;
};

childrenを受け取りたいときは明示的に含める必要がありそうです。

ただ、このVFCもReact18以降はVFC自体が非推奨となり、FCからもchildrenが削除されましたようです。

プロジェクトによるとは思いますが、React.FCという記述を見つけたらなるべく使わないように心がけたいですね。

ReactのVerが18以降かその前なのかも要チェックです