React.FCを使うべきではない理由

BRANK

はじめに先日、Gusto のエンジニアリングブログに The Journey to a Safer Frontend: Why We Removed React.FC という記事が公開されていました。この記事では、数千ものコンポーネントで使われていた React.FC をすべて除去し、通常の関数コンポーネントに移行した経緯が語られています。「React.FC は避けるべき」という話は以前からありましたが、なぜこれほど大規模な移行が行われたのでしょうか。本記事では、React.FC が抱える具体的な問題点をコードで検証し、現在の推奨される書き方について整理します。React.FC とはReact.FC（React.FunctionComponent）は、TypeScript で関数コンポーネントに型を付けるためのインターフェースです。// React.FC を使った書き方 const Card: React.FC<CardProps> = ({ title }) => { return <div>{title}</div>; }; // 通常の関数コンポーネント const Card = ({ title }: CardProps) => { return <div>{title}</div>; }; 一見するとどちらでも大きな差はないように見えますが、型チェックの挙動に重要な違いがあります。問題1：余剰プロパティチェックが効かない → 未使用の Props が残りやすい!2026/02/24 訂正: 初版では…