デフォルトPropsの「正解」：型安全とレンダリング最適化の極致

Reactの現場で、`defaultProps`という言葉を聞かなくなって久しい。もし君のプロジェクトで未だにコンポーネントの下部に `Component.defaultProps = { … }` と記述しているなら、今すぐその手を止めてほしい。

かつてのReactは関数型コンポーネントが未熟で、クラスコンポーネントの遺産を引きずっていた。しかし、現代のReactにおいて「Propsのデフォルト値」を扱うことは、単なる初期値の代入ではない。それは型システムの整合性と、再レンダリングの最適化、そして実行時のメモリ効率を制御するアーキテクチャそのものだ。

今日は、上級エンジニアである君に向けて、モダンReactにおける「デフォルト値の最適解」を深掘りする。

—

1. なぜ `defaultProps` は「アンチパターン」なのか

React公式が関数型コンポーネントにおける `defaultProps` の使用を非推奨とした理由は明白だ。最大の罪は、「型推論の不整合」と「不要な型定義の肥大化」にある。

`defaultProps` を使うと、コンポーネント内部では「Propsは必ず存在する」と見なされるが、呼び出し元では「Propsはオプショナルである」と認識される。この乖離は、TypeScriptの型定義を複雑にし、最悪の場合、型ガードをすり抜けるバグを誘発する。

また、Reactの内部実装において、`defaultProps` はレンダリングのたびに余計なプロパティチェックを走らせる。微々たる差に見えるかもしれないが、大規模なコンポーネントツリーにおいてこれが数千回積み重なれば、ブラウザのメインスレッドを無駄に占有する原因となる。

—

2. 実践：デフォルト引数による「型安全」と「メモリ効率」

現代の正解は、JavaScript/TypeScriptの標準機能である「分割代入時のデフォルト値」を活用することだ。これにより、コンポーネントのシグネチャと型定義を完全に一致させることができる。

interface ButtonProps {
label: string;
variant?: ‘primary’ | ‘secondary’; // オプショナルなプロパティ
onClick?: () => void;
}

// 分割代入でデフォルト値を定義する。これがメモリ効率と型安全の最適解。
export const Button = ({
label,
variant = ‘primary’, // デフォルト値の注入
onClick = () => console.log(‘Clicked’), // クロージャの再生成を避ける設計にする必要がある
}: ButtonProps) => {
// ここでvariantは常に’primary’か’secondary’であることが保証される
return {label};
};

重要な知見：関数の再生成という罠

上記の例で `onClick = () => …` と書くと、親コンポーネントが再レンダリングされるたびに、新しい無名関数が生成され、`Button`コンポーネントの参照透過性が損なわれる。
本当に堅牢なアプリケーションを目指すなら、デフォルトのハンドラはコンポーネントの外側（モジュールスコープ）で定義し、参照を固定する。

// 再生成を防ぐため、コンポーネント外で定義し参照を固定する
const NOOP = () => {};

export const Button = ({
onClick = NOOP, // 参照が固定されるため、不要な再レンダリングを防げる
}: ButtonProps) => { … }

—

3. 非同期データとデフォルト値の競合：UXの観点

ここからがアーキテクチャの話だ。APIから取得したデータが未達の状態でコンポーネントに渡される際、デフォルト値と「ローディング状態」の境界線をどう引くべきか。

よくある過ちが、`defaultValue` をAPIの初期値として使い、UIをレンダリングしてしまうことだ。これは「古いデータ」を表示させるバグや、「読み込み中」という状態の隠蔽を招く。

堅牢な設計へのアプローチ

「Propsが渡されないケース」と「データが未ロードのケース」を明確に分離せよ。

• Propsのデフォルト値: コンポーネントが自律的に振る舞うための「構成設定」に使う（例: `size`, `color`）。
• データロード状態: `undefined` や `null` を受け入れ、ローディングスピナーやスケルトンを表示する責務をコンポーネントに持たせる。

// データが未ロードなら何も表示しない、あるいはスケルトンを表示する設計
export const UserProfile = ({ name }: { name?: string }) => {
if (name === undefined) {
return