React リファクタリングのベストプラクティス

React アプリケーションのアーキテクチャリファクタリングガイド。7つのカテゴリにわたる40個のルールを含み、クリティカル（コンポーネントとステート設計）からインクリメンタル（リファクタリング安全性）まで、影響度でまとめています。

適用するべき場合

• 既存の React コードベースのリファクタリング、または大規模な再構築の計画
• PR レビューでアーキテクチャ上の問題とコード臭を検出する際
• 過度に大きなコンポーネントを小さく焦点を絞ったユニットに分解する
• コンポーネントロジックから再利用可能なカスタムフックを抽出する
• React コードのテスト可能性を向上させる
• 機能モジュール間の結合度を低減する

ルールカテゴリ

クイックリファレンス

クリティカルパターン — まずこれらを正しく実装する：

• props の爆発を避けるために compound components を使用
• 状態をそれを使用するコンポーネントと同じ場所に配置
• 複雑な UI ワークフローに state machines を使用
• コンテナロジックをプレゼンテーショナルコンポーネントから分離

よくある間違い — これらのアンチパターンを避ける：

• 1 つのコンポーネントだけが読む場合に App に state を上げる
• 頻繁に変更される値に context を使用する
• fetch + 変換 + キャッシュをすべて行うモノリシックなカスタムフック
• 実装の詳細ではなく動作をテストする

目次

1. Component Architecture — CRITICAL
   • 1.1 インターフェースセグリゲーションをコンポーネント Props に適用 — CRITICAL（不要なリレンダリングの30～50%を防止）
   • 1.2 型ではなく機能でファイルを共存させる — CRITICAL（ディレクトリ間のナビゲーションを70%削減）
   • 1.3 Render Props をカスタムフックに変換 — CRITICAL（ネストを2～4レベル削除）
   • 1.4 ロジック再利用のためにヘッドレスコンポーネントを抽出 — CRITICAL（再利用シナリオが5倍増加）
   • 1.5 Props の爆発より合成を優先 — CRITICAL（prop 数を50～70%削減）
   • 1.6 コンテナロジックをプレゼンテーショナルコンポーネントから分離 — CRITICAL（独立したテストを可能にする）
   • 1.7 暗黙的なステート共有に compound components を使用 — CRITICAL（API サーフェスを60%削減）
   • 1.8 クライアント境界をリーフコンポーネントに移動 — HIGH（60～80%をサーバーレンダリングに保つ）
2. State Architecture — CRITICAL
   • 2.1 状態をそれを使用するコンポーネントと共存させる — CRITICAL（props の受け渡しを60%削減）
   • 2.2 ステート同期ではなく導出値を使用 — CRITICAL（ダブルレンダリングサイクルを削除）
   • 2.3 複数のコンポーネントが読む場合のみ state を上げる — CRITICAL（不要な親のリレンダリングを削除）
   • 2.4 ほとんど変更されない値にのみ context を使用 — CRITICAL（リレンダリングが5～50倍削減）
   • 2.5 複雑な UI ワークフローに state machines を使用 — CRITICAL（有効な状態が2^nからNに削減）
   • 2.6 共有可能なビューのための URL パラメータをステートとして使用 — CRITICAL（ディープリンクと共有を可能にする）
   • 2.7 複数フィールドの状態遷移に useReducer を使用 — CRITICAL（不可能な状態を削除）
3. Hook Patterns — HIGH
   • 3.1 カスタムフックのオブジェクトと配列の依存関係を避ける — HIGH（毎フレームのエフェクト再実行を防止）
   • 3.2 フックをネストするのではなく合成 — HIGH（依存関係グラフを平坦化）
   • 3.3 動作が命名可能な場合はロジックをカスタムフックに抽出 — HIGH（コンポーネントが40～60%短縮）
   • 3.4 発見性のためにカスタムフックの命名規則に従う — HIGH（ナビゲーション時間を40%削減）
   • 3.5 カスタムフックを単一責任に保つ — HIGH（テストが3倍簡単）
   • 3.6 Ref とコールバックでフック依存関係を安定させる — HIGH（無限ループを防止）
4. Component Decomposition — HIGH
   • 4.1 スクロールテストを適用して過度に大きなコンポーネントを特定 — HIGH（コードレビューが3倍高速化）
   • 4.2 半端な措置なしでコンポーネント抽出を完了 — HIGH（独立したテストと再利用を可能にする）
   • 4.3 独立した変更理由によってコンポーネントを抽出 — HIGH（変更ごとにタッチするファイルが70%削減）
   • 4.4 コンポーネント本体から純粋関数を抽出 — HIGH（ユニットテストが10倍高速）
   • 4.5 インライン化してから再抽出する前に早すぎる抽象化を削除 — HIGH（コードが40～60%簡潔に）
   • 4.6 ビュー層をビジネスロジックから分離 — HIGH（テストスイートが5倍高速）
5. Coupling & Cohesion — MEDIUM
   • 5.1 中間モジュールで循環依存を破棄 — MEDIUM（インポート時に未定義のバグを削除）
   • 5.2 安定した公開 API サーフェスのみからインポート — MEDIUM（内部リファクタリングを可能にする）
   • 5.3 クリーンな依存関係のためにバレルフリーの機能モジュールを使用 — MEDIUM（200～800ms のビルド短縮）
   • 5.4 外部サービスに依存性注入を使用 — MEDIUM（テストセットアップが3倍高速）
6. Data & Side Effects — MEDIUM
   • 6.1 デフォルトではサーバーでデータを取得 — MEDIUM（クライアント JS を30～60%削減）
   • 6.2 データ取得粒度でエラー境界を配置 — MEDIUM（エラーを影響受けたセクションに隔離）
   • 6.3 アクション共存化のために Context Module パターンを使用 — MEDIUM（データ変更を一元化）
   • 6.4 クライアント側サーバーステートに TanStack Query を使用 — MEDIUM（取得定型コードの80%を削除）
7. Refactoring Safety — LOW-MEDIUM
   • 7.1 リファクタリング済みコンポーネントのスナップショットテストを避ける — LOW-MEDIUM（偽のテスト失敗を削除）
   • 7.2 テスト可能性を向上させるために純粋関数を抽出 — LOW-MEDIUM（テスト実行が10倍高速）
   • 7.3 コンポーネント検証に統合テストを優先 — LOW-MEDIUM（バグを40%多く検出）
   • 7.4 実装詳細ではなくコンポーネント動作をテスト — LOW-MEDIUM（テスト更新が5倍削減）
   • 7.5 リファクタリング前に特性テストを記述 — LOW-MEDIUM（意図しない変更の90%を検出）

参考資料

1. https://react.dev
2. https://react.dev/learn/thinking-in-react
3. https://kentcdodds.com/blog/application-state-management-with-react
4. https://testing-library.com/docs/guiding-principles
5. https://patterns.dev

関連スキル

• React 19 API のベストプラクティスについては react スキルを参照
• アプリケーション性能最適化については react-optimise スキルを参照
• クライアント側フォームハンドリングについては react-hook-form スキルを参照