react-optimise

React の最適化に関するベストプラクティス

React アプリケーション向けのアプリケーションレベルのパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 43 のルールを収録し、重大（React Compiler、バンドルの最適化）から段階的な改善（メモリ管理）まで、影響度の高い順に優先順位を付けています。

適用するタイミング

• React アプリケーションのパフォーマンスやバンドルサイズを最適化するとき
• React Compiler v1.0 を導入するとき、またはトラブルシューティングするとき
• バンドルを分割し、コード分割を設定するとき
• Core Web Vitals（INP、LCP、CLS）を改善するとき
• レンダリングパフォーマンスをプロファイリングし、ボトルネックを特定するとき
• 長時間稼働するシングルページアプリケーションのメモリリークを修正するとき
• データ取得のパターンを最適化し、ウォーターフォールをなくすとき

ルールのカテゴリ

カテゴリ	影響度	ルール数	主なトピック
React Compiler の習熟	重大	6	コンパイラに適したコード、バイパスの検出、段階的な導入
バンドルと読み込み	重大	6	ルート分割、バレルの排除、動的インポート、プリフェッチ
レンダリングの最適化	高	6	仮想化、children パターン、デバウンス、CSS containment
データ取得のパフォーマンス	高	5	ウォーターフォールの排除、ルートの事前読み込み、SWR、重複排除
Core Web Vitals	中〜高	5	INP のための処理の譲り渡し、LCP の優先順位付け、CLS の防止、画像の最適化
状態とサブスクリプションのパフォーマンス	中〜高	5	コンテキストの分割、セレクター、アトミックな状態、派生状態
プロファイリングと測定	中	5	DevTools によるプロファイリング、フレームグラフ、CI の予算、本番ビルド
メモリ管理	低〜中	5	Effect のクリーンアップ、非同期処理のキャンセル、クロージャーによるリーク、ヒープ分析

クイックリファレンス

重要なパターン — まずは次の点を正しく実践してください。

• コンパイラに適したコンポーネントを記述し、自動的な 2〜10 倍の最適化を可能にする
• ルートの境界でコードを分割し、初期バンドルを 40〜70％削減する
• バレルファイルをなくし、ツリーシェイキングを可能にする
• コンパイラが警告なくバイパスされるケースを検出して修正する

よくある間違い — 次のアンチパターンを避けてください。

• レンダリング中に refs を読み取る（コンパイラの最適化が機能しなくなります）
• 1 つの関数だけを使うのに、ライブラリ全体をインポートする
• 最適化の前にプロファイリングしない（誤ったボトルネックを対象にしてしまいます）
• Effect のクリーンアップがない（サブスクリプションによるメモリリーク）

目次

1. React Compiler Mastery — CRITICAL
   • 1.1 コンパイラーのサイレントな最適化停止を検出して修正する — CRITICAL（自動メモ化の喪失を防ぎます）
   • 1.2 コンパイラーの正確性を保つため、副作用をレンダリングから分離する — CRITICAL（コンパイラーが誤ったキャッシュ出力を生成するのを防ぎます）
   • 1.3 コンパイラー導入後に手動メモ化を削除する — CRITICAL（コンポーネントファイルのコードを20〜40％削減します）
   • 1.4 ディレクティブを使用してコンパイラーを段階的に導入する — CRITICAL（コードベース全体を移行せずに安全に展開できます）
   • 1.5 コンパイルを可能にするrefアクセスパターンを使用する — CRITICAL（refを使用するコンポーネントのコンパイラー最適化を維持します）
   • 1.6 コンパイラーに適したコンポーネントパターンを記述する — CRITICAL（自動レンダリング最適化を2〜10倍にします）
2. バンドルと読み込み — CRITICAL
   • 2.1 効果的なツリーシェイキングのために依存関係を設定する — CRITICAL（依存関係の不要なコードを50〜90％削除します）
   • 2.2 ツリーシェイキングを可能にするためにバレルファイルを排除する — CRITICAL（インポートコストを200〜800ms削減します）
   • 2.3 分析ツールを使ってバンドルサイズの予算を設定する — CRITICAL（バンドルサイズの漸進的な悪化を防ぎます）
   • 2.4 インタラクション時に次に表示される可能性の高いルートをプリフェッチする — CRITICAL（体感ナビゲーション速度を200〜1000ms向上させます）
   • 2.5 React.lazyでルート境界ごとにコードを分割する — CRITICAL（初期バンドルサイズを40〜70％削減します）
   • 2.6 大きなライブラリには動的インポートを使用する — CRITICAL（クリティカルパスから100〜500KBを削減します）
3. レンダリングの最適化 — HIGH
   • 3.1 JSXのprops内でのインラインオブジェクト生成を避ける — HIGH（不要な子コンポーネントの再レンダリングを防ぎます）
   • 3.2 コストの高い派生計算をデバウンスする — HIGH（キー入力ごとに50〜200msを節約します）
   • 3.3 CSS Containmentを使ってレイアウトの再計算を分離する — HIGH（レイアウト再計算を60〜90％削減します）
   • 3.4 childrenパターンを使って親の再レンダリングを防ぐ — HIGH（静的なサブツリーの再レンダリングをなくします）
   • 3.5 リストのレンダリング性能のために安定したキーを使う — HIGH（DOM変更をO(n)からO(1)の移動に減らします）
   • 3.6 TanStack Virtualで長いリストを仮想化する — HIGH（DOMノードをO(n)からO(1)に減らします）
4. データ取得のパフォーマンス — HIGH
   • 4.1 ナビゲーション時や再取得時に古いリクエストを中止する — HIGH（古いデータの表示を防ぎます）
   • 4.2 実行中の同一リクエストを重複排除する — HIGH（ネットワークリクエストを50〜80％削減します）
   • 4.3 逐次的なデータ取得のウォーターフォールをなくす — HIGH（ページ読み込みを2〜5倍高速化します）
   • 4.4 コンポーネントのマウント前にルートレベルでデータをプリロードする — HIGH（200〜1000msを削減します）
   • 4.5 キャッシュを新鮮に保つため、Stale-While-Revalidateを使用する — HIGH（再訪問者の体感読み込み時間を0msにします）
5. Core Web Vitals — MEDIUM-HIGH
   • 5.1 web-vitalsでリアルユーザーモニタリングを計測する — MEDIUM-HIGH（データに基づく最適化を可能にします）
   • 5.2 レスポンシブなサイズ設定と遅延読み込みで画像を最適化する — MEDIUM-HIGH（帯域幅を40〜70％削減します）
   • 5.3 処理を譲ることでInteraction to Next Paintを最適化する — MEDIUM-HIGH（INPを500ms以上から200ms未満に改善します）
   • 5.4 優先読み込みでLargest Contentful Paintを最適化する — MEDIUM-HIGH（LCPを200〜1000ms改善します）
   • 5.5 サイズを事前に確保してCumulative Layout Shiftを防ぐ — MEDIUM-HIGH（CLSを0.25以上から0.1未満に改善します）
6. 状態とサブスクリプションのパフォーマンス — MEDIUM-HIGH
   • 6.1 同期せずに状態から値を導出し、余分なレンダリングをゼロにする — MEDIUM-HIGH（二重レンダリングのサイクルをなくします）
   • 6.2 サーバー状態とクライアント状態の管理を分離する — MEDIUM-HIGH（状態管理コードを40％削減します）
   • 6.3 Contextを分割して高頻度の更新を分離する — MEDIUM-HIGH（再レンダリングを5〜50倍削減します）
   • 6.4 独立したリアクティブ値にはアトミック状態を使用する — MEDIUM-HIGH（不要な再レンダリングを3〜10倍削減します）
   • 6.5 セレクターベースのサブスクリプションを使って更新を細分化する — MEDIUM-HIGH（影響を受けるコンポーネントだけに再レンダリングを抑えます）
7. プロファイリングと計測 — MEDIUM
   • 7.1 本番ビルドのみでベンチマークを行う — MEDIUM（開発モードのオーバーヘッドによる誤検出を防ぎます）
   • 7.2 CIでパフォーマンス予算を徹底する — MEDIUM（マージ前にパフォーマンスの問題の90％を検出します）
   • 7.3 最適化の前にプロファイリングを行い、実際のボトルネックを特定する — MEDIUM（最適化の効果を10倍高めます）
   • 7.4 フレームチャートを読み、負荷の高いレンダリング経路を特定する — MEDIUM（レンダリング時間の80％を占める関数を正確に特定します）
   • 7.5 React Performance Tracksでレンダリングを分析する — MEDIUM（数分でレンダリングのボトルネックを特定します）
8. メモリ管理 — LOW-MEDIUM
   • 8.1 イベントハンドラーでクロージャによるメモリリークを避ける — LOW-MEDIUM（MB単位のメモリ保持を防ぎます）
   • 8.2 アンマウント時に非同期処理をキャンセルする — LOW-MEDIUM（古い状態の更新とメモリ保持を防ぎます）
   • 8.3 サブスクリプションによるメモリリークを防ぐため、エフェクトをクリーンアップする — LOW-MEDIUM（メモリの線形増加を防ぎます）
   • 8.4 クリーンアップ関数で大きなリソースを破棄する — LOW-MEDIUM（リソースごとに5〜50MBが保持されるのを防ぎます）
   • 8.5 ヒープスナップショットでコンポーネントの保持を検出する — LOW-MEDIUM（10〜100MBのメモリ増加を特定します）

参考資料

1. https://react.dev
2. https://react.dev/blog/2025/10/07/react-compiler-1
3. https://web.dev/articles/vitals
4. https://tanstack.com/virtual
5. https://developer.chrome.com/docs/devtools/performance

関連スキル

• React 19 の API に関するベストプラクティスについては、react スキルを参照してください
• Next.js App Router の最適化については、nextjs-16-app-router スキルを参照してください
• クライアント側のフォーム処理については、react-hook-form スキルを参照してください