react

React 19 のベストプラクティス

React 19 アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 40 のルールを収録し、重要度の高いもの（並行レンダリング、サーバーコンポーネント）から段階的なもの（コンポーネントのパターン）まで、影響度の高い順に優先順位を付けています。

目次

1. 並行レンダリング — CRITICAL
   • 1.1 Suspense のフォールバックのちらつきを防ぐ — HIGH（ちらつきを防ぎ、よりスムーズな UX を実現）
   • 1.2 自動バッチ処理を活用してレンダリング回数を減らす — HIGH（負荷の高い更新でレンダリング回数を 32% 削減）
   • 1.3 派生した高コストな値には useDeferredValue を使う — CRITICAL（派生値の計算によるカクつきを防ぐ）
   • 1.4 ブロッキングしない更新には useTransition を使う — CRITICAL（負荷の高い更新中も UI の応答性を維持）
   • 1.5 並行レンダリングに安全なコンポーネントを作成する — MEDIUM-HIGH（並行レンダリングでのバグを防ぐ）
2. サーバーコンポーネント — CRITICAL
   • 2.1 サーバーコンポーネントではクライアント専用ライブラリを避ける — MEDIUM-HIGH（ビルドエラーを防ぎ、コンポーネントを適切に配置）
   • 2.2 ネストされた Suspense でストリーミングを有効にする — MEDIUM-HIGH（段階的な読み込み、TTFB の短縮）
   • 2.3 サーバーコンポーネントでデータを取得する — CRITICAL（クライアント側の JS を 38% 削減し、クライアント側のウォーターフォールを回避）
   • 2.4 サーバー／クライアント境界の越境を最小限にする — CRITICAL（シリアライズのオーバーヘッドを削減し、バンドルを小さくする）
   • 2.5 クライアントコンポーネントにはシリアライズ可能な props のみを渡す — HIGH（実行時エラーを防ぎ、適切なハイドレーションを保証）
   • 2.6 コンポジションを使ってサーバーコンポーネントとクライアントコンポーネントを組み合わせる — HIGH（静的コンテンツのサーバーレンダリングを維持）
3. アクションとフォーム — HIGH
   • 3.1 onSubmit の代わりにフォームアクションを使う — HIGH（プログレッシブエンハンスメント、コードの簡素化）
   • 3.2 フォームの状態管理には useActionState を使う — HIGH（宣言的なフォーム処理、保留状態を自動管理）
   • 3.3 送信ボタンの状態管理には useFormStatus を使う — MEDIUM-HIGH（適切な読み込みインジケーター、二重送信を防止）
   • 3.4 即時の UI フィードバックには useOptimistic を使う — HIGH（体感上の即時応答、失敗時の自動ロールバック）
   • 3.5 アクションを使ってサーバー側でフォームを検証する — MEDIUM（安全な検証、一貫したエラー処理）
4. データ取得 — HIGH
   • 4.1 Promise.all でデータを並列取得する — MEDIUM-HIGH（ウォーターフォールを解消し、2～5 倍高速化）
   • 4.2 リクエストの重複排除には cache() を使う — HIGH（レンダーごとの重複した取得を解消）
   • 4.3 Suspense とエラーバウンダリーを組み合わせる — MEDIUM（適切なエラー復旧、障害の分離）
   • 4.4 宣言的な読み込み状態には Suspense を使う — HIGH（コードの簡潔化、連携した読み込み UI）
   • 4.5 レンダー中の Promise には use() フックを使う — HIGH（非同期コンポーネントのコードを簡潔化し、Suspense と連携）
5. 状態管理 — MEDIUM-HIGH
   • 5.1 レンダー中に派生値を計算する — MEDIUM（同期のバグを解消し、コードを簡潔化）
   • 5.2 コンテキストを分割して不要な再レンダーを防ぐ — MEDIUM（コンテキストの変更による再レンダーを削減）
   • 5.3 派生値の状態更新には関数形式を使う — MEDIUM-HIGH（古いクロージャーを防ぎ、コールバックを安定化）
   • 5.4 初期状態の計算コストが高い場合は遅延初期化を使う — MEDIUM-HIGH（レンダーのたびに高コストな計算が行われるのを防ぐ）
   • 5.5 複雑な状態ロジックには useReducer を使う — MEDIUM（状態遷移が明確になり、テストが容易）
6. メモ化とパフォーマンス — MEDIUM
   • 6.1 時期尚早なメモ化を避ける — MEDIUM（メモ化にはオーバーヘッドがあるため、まず測定する）
   • 6.2 React Compiler を活用してメモ化を自動化する — MEDIUM（自動最適化により、手動で書くコードを削減）
   • 6.3 高コストな純粋コンポーネントには React.memo を使う — MEDIUM（props が変わらない場合に再レンダーをスキップ）
   • 6.4 関数参照を安定させるには useCallback を使う — MEDIUM（参照の変化による子コンポーネントの再レンダーを防ぐ）
   • 6.5 高コストな計算には useMemo を使う — MEDIUM（再レンダー時の高コストな再計算をスキップ）
7. エフェクトとイベント — MEDIUM
   • 7.1 エフェクトの副作用は必ずクリーンアップする — MEDIUM（メモリーリークや古いコールバックを防ぐ）
   • 7.2 派生状態やユーザーイベントにはエフェクトを使わない — MEDIUM（同期のバグを解消し、コードを簡潔化）
   • 7.3 エフェクトの依存関係にオブジェクトや配列を使わない — MEDIUM（無限ループや不要な再実行を防ぐ）
   • 7.4 リアクティブでないロジックには useEffectEvent を使う — MEDIUM（リアクティブなコードとそうでないコードを分離）
   • 7.5 外部サブスクリプションには useSyncExternalStore を使う — MEDIUM（サブスクリプションを適切に処理し、SSR に対応）
8. コンポーネントのパターン — LOW-MEDIUM
   • 8.1 適切に制御コンポーネントと非制御コンポーネントを選ぶ — LOW-MEDIUM（適切なデータフローとフォーム処理）
   • 8.2 props の肥大化よりコンポジションを優先する — LOW-MEDIUM（より柔軟で再利用しやすいコンポーネント）
   • 8.3 コンポーネントの状態をリセットするには key を使う — LOW-MEDIUM（状態を適切に分離し、正しくリセット）
   • 8.4 制御の反転にはレンダープロップを使う — LOW-MEDIUM（柔軟なレンダリングとロジックの共有）

参考資料

1. https://react.dev
2. https://react.dev/blog/2024/12/05/react-19
3. https://react.dev/blog/2025/10/01/react-19-2
4. https://react.dev/learn/you-might-not-need-an-effect
5. https://github.com/facebook/react

関連スキル

• Next.js 16 App Router については、nextjs-16-app-router スキルを参照してください
• クライアントサイドのフォーム処理については、react-hook-form スキルを参照してください
• TanStack Query を使ったデータのキャッシュについては、tanstack-query スキルを参照してください