react

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

React 19 アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 44 のルールを収録し、並行レンダリングやサーバーコンポーネントなど重要度の高い項目から、コンポーネントのパターンなど段階的な項目まで、影響度に応じて優先順位を付けています。React 19.3 で安定化された機能、<ViewTransition>、Fragment refs、Server Components での直接的な Context プロバイダーについても扱います。

目次

1. 並行レンダリング — CRITICAL
   • 1.1 Suspense のフォールバックのちらつきを防ぐ — HIGH（ちらつきを防ぎ、UX を滑らかにします）
   • 1.2 自動バッチ処理を活用してレンダー回数を減らす — HIGH（負荷の高い更新でのレンダー回数を減らします）
   • 1.3 派生した高コストな値には useDeferredValue を使う — CRITICAL（派生値の計算によるカクつきを防ぎます）
   • 1.4 ブロッキングしない更新には useTransition を使う — CRITICAL（負荷の高い更新中も UI の応答性を保ちます）
   • 1.5 並行レンダリングに対応したコンポーネントを作成する — MEDIUM-HIGH
   • 1.6 ViewTransition で UI の変更をアニメーション化する — MEDIUM（クラスを手動で切り替えずに、ネイティブの View Transition API アニメーションを使えます）
2. サーバーコンポーネント — CRITICAL
   • 2.1 サーバーコンポーネントでクライアント専用ライブラリを避ける — MEDIUM-HIGH
   • 2.2 ネストした Suspense でストリーミングを有効にする — MEDIUM-HIGH
   • 2.3 サーバーコンポーネントでデータを取得する — CRITICAL（クライアント側の JavaScript を減らし、クライアント側のウォーターフォールをなくします）
   • 2.4 サーバー／クライアント境界のまたぎを最小限にする — CRITICAL（シリアライズのオーバーヘッドを減らし、バンドルを小さくします）
   • 2.5 クライアントコンポーネントにはシリアライズ可能な props のみを渡す — HIGH（実行時エラーを防ぎ、正しいハイドレーションを保証します）
   • 2.6 コンポジションを使ってサーバーコンポーネントとクライアントコンポーネントを組み合わせる — HIGH（静的コンテンツのサーバーレンダリングを維持します）
   • 2.7 サーバーコンポーネントでコンテキストプロバイダーをレンダーする — LOW-MEDIUM（プロバイダーをラップするコンポーネントをクライアントツリーから取り除きます。19.3）
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
   • 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 に対応します）
   • 7.6 クライアント専用のレンダリングには use(browser()) を使う — MEDIUM（マウント済みフラグによる二重レンダーが不要になります。React 19.3+）
8. コンポーネントのパターン — LOW-MEDIUM
   • 8.1 状況に応じて制御コンポーネントと非制御コンポーネントを選ぶ — LOW-MEDIUM
   • 8.2 props の肥大化よりコンポジションを優先する — LOW-MEDIUM
   • 8.3 key を使ってコンポーネントの状態をリセットする — LOW-MEDIUM
   • 8.4 制御の反転にはレンダープロップを使う — LOW-MEDIUM
   • 8.5 フラグメント参照で兄弟要素に DOM の動作を割り当てる — LOW-MEDIUM（ラッパー要素を使わずに子要素の DOM に ref でアクセスできます。19.3 で安定版です）

使い方

まずプロジェクトのルートで実行します。

npx -y @pymodel/react-frontend-skills detect  # installed vs. targeted versions

タスクに該当する各ルールについて、references/<rule-id>.md を読んでください。重要な理由と、誤ったコードと正しいコードを確認できます。

参考資料

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 スキルを参照してください
• クライアント側のフォーム処理については、react-hook-form スキルを参照してください
• TanStack Query を使ったデータキャッシュについては、tanstack-query スキルを参照してください