TL;DR: クイック修正
Component.defaultProps プロパティの使用を止めましょう。代わりに、標準的な JavaScript の構文を使用して、関数のシグネチャに直接デフォルト値を記述します。
修正前:
function Button({ label, color }) {
return <button style={{ color }}>{label}</button>;
}
Button.defaultProps = {
color: 'blue',
label: 'クリックしてね'
};
修正後:
function Button({ label = 'クリックしてね', color = 'blue' }) {
return <button style={{ color }}>{label}</button>;
}
なぜ React はこの変更を行うのですか？
React 18.3 はバージョン 19 への架け橋としての役割を果たします。この警告は、機能が正式に削除される前に開発者がリファクタリングを行う時間を確保するために導入されました。React チームは、冗長なパターンを削除することでライブラリの合理化を進めています。ES6 のデフォルト引数が JavaScript の標準となった現在、関数コンポーネントのために React 独自の defaultProps を維持し続ける必要がなくなったためです。
ネイティブのデフォルト値はより効率的です。React が管理する必要のあるオーバーヘッドを削減し、VS Code などの IDE によるコード解析も容易になります。なお、この変更は関数コンポーネントのみに影響します。クラスコンポーネントについては、当面の間 defaultProps のサポートが継続されます。
一般的なパターンのリファクタリング
1. 標準的な分割代入
ほとんどのモダンなコンポーネントでは、すでにプロパティ（props）の分割代入が行われています。もし未導入であれば、今こそが絶好の機会です。これにより、コンポーネントの依存関係が一目で明確になります。
// ❌ 以前の方法
const UserProfile = (props) => {
return <div>{props.name}</div>;
};
UserProfile.defaultProps = { name: 'ゲスト' };
// ✅ 新しい方法
const UserProfile = ({ name = 'ゲスト' }) => {
return <div>{name}</div>;
};
2. TypeScript での対応
TypeScript を使用する場合、インターフェース内で ? 演算子を使用してプロパティをオプションとしてマークします。その後、分割代入時にデフォルト値を割り当てます。これにより、新しい React の要件を満たしながら、型の正確性を維持できます。
interface Props {
title?: string;
isAdmin?: boolean;
}
const Header = ({ title = 'ようこそ', isAdmin = false }: Props) => {
return (
<header>
<h1>{title}</h1>
{isAdmin && <span>管理者ダッシュボード</span>}
</header>
);
};
3. forwardRef と memo の処理
React.memo や forwardRef のような高階コンポーネント（HOC）は、混乱を招きやすい箇所です。修正方法は同じです。実際にプロパティを受け取る内部関数のシグネチャ内にデフォルト値を記述してください。
const CustomInput = React.forwardRef(({ type = 'text', placeholder = 'テキストを入力...' }, ref) => {
return <input ref={ref} type={type} placeholder={placeholder} />;
});
ライブラリ内でエラーが発生している場合は？
自身のコードが完璧であっても、この警告が表示されることがあります。Recharts、Material UI (旧バージョン)、React Bootstrap などの有名なライブラリは、歴史的に defaultProps に依存してきました。実際、Recharts のユーザーはバージョン 2.13.0 までこの警告を頻繁に目にすることになりました。
- すぐに更新する:
npm updateを実行してください。ほとんどのメンテナは、すでに React 19 互換のパッチをリリースしています。 - 原因を特定する: 警告内のコンポーネント名を確認してください。もし
<XAxis>や<ResponsiveContainer>のような名前であれば、問題はnode_modules内にあります。 - 待機またはパッチの適用: ライブラリのメンテナンスが止まっている場合は、React 19 にアップグレードする前に
patch-packageを使用するか、よりモダンな代替ライブラリへの移行を検討する必要があります。
修正を確認する方法
- 開発モードでリフレッシュ: これらの警告は開発モードでのみ発生します。ブラウザを更新してコンソールを確認してください。
- 特定のトリガーを確認: コンポーネントがレンダリングされる特定のルートに移動してください。一部の警告は、コンポーネントが実際にマウントされたときにのみ発生します。
- プロパティの上書きテスト: プロパティを手動で渡した場合に、新しいデフォルト値が正しく上書きされることを確認してください。例えば、
<Button color="red" />は、デフォルトの青ではなく赤でレンダリングされる必要があります。