React 19 ベストプラクティス

AI エージェント向けの包括的な React 19/19.2 ベストプラクティスガイド。9 つのカテゴリーにわたる 49 のルールを含み、重大事項 (concurrent rendering、Server Components) から横断的なコードベース衛生 (dedup、dead code、boundary coherence) まで、影響度順にプライオリティ付けされています。React 19 の主要な変更を反映：ref を通常のプロップとして扱用 (forwardRef 廃止)、ネイティブドキュメントメタデータ、リソースプリロード API、useActionState、useOptimistic、use() フック、および <Context> をプロバイダーとして使用。

ルールファイルはパターン形状(API 名ではなく)を説明し、**「認識すべき形状」セクションで開始します。このセクションでは、同じ違反が現れる 2～4 つの構文的な装いを列挙しています。高価値ルール選定 (form actions、ref-as-prop、derived state、context、use() フック、useCallback/memo ペアリングなど、実際のコードベースで最も一般的な装いを持つもの) には、パターン検出を grep 対応ケース以上に教えるための、追加の具体的な「装いを変えた」**正誤例ペアが含まれています。

適用タイミング

• 新しい React コンポーネントの作成または既存コンポーネントのリファクタリング
• ディレクトリ、PR、またはリポジトリ全体の監査またはモダン化 (references/_review-algorithm.md の必須手順を参照)
• React 18 から React 19 への移行 (forwardRef → ref-as-prop、<Context.Provider> → <Context>、useFormState → useActionState)
• 再レンダリングパフォーマンスまたはバンドルサイズの最適化
• concurrent 機能の使用 (useTransition、useDeferredValue、Activity)
• Server Components またはサーバー/クライアント境界の設定
• Form actions、optimistic updates、またはデータフェッチングの実装
• 自動メモ化用の React Compiler 設定
• 一般的なアンチパターンまたは廃止された React 18 イディオムの React コード検視
• コードベースレベルの問題の発見: ファイル間の重複ロジック、near-duplicate コンポーネント、dead code、不要な 'use client' ファイル、プロップ形状のドリフト (カテゴリー9 参照)

コードベースの審査またはリファクタリング方法

ユーザーが React コード (単一ファイルまたは全リポジトリ) の審査、リファクタリング、モダン化、または監査を依頼した場合は、references/_review-algorithm.md に従ってください。即興しないでください。

そのドキュメントからの 4 つの絶対要件：

1. 2 つのモード — 全リポジトリ監査を決して拒否しないでください。 モード A (限定的、≤~20 ファイル) またはモード B (全ツリー: インベントリパス + ターゲットスイープ + カテゴリー9 全体) を選択します。アルゴリズムは、800 ファイルをコンテキストにダンプすることなく、「コードベースを監査してください」にどう対応するかを教えてくれます。

2. grep より判断を優先します。 各ルールは構文マーカーではなく、パターン形状を指定します。スイープする前に各ルールの認識すべき形状セクションを読んでください — grep は簡単な違反を見つけ、高価値の違反を見逃します (著者が forwardRef を回避したため手動でドリルされたコールバック ref、useActionState の機能を行う onSubmit、derived state の形をした useState+useEffect、fetch ダンスを隠すカスタムフック)。Grep はトリガーであり、決して判定ではありません。

3. ファイル単位ではなくカテゴリー単位で、強制機能を伴う。 スコープ内の全ファイルについて、プライオリティ順 (CRITICAL → … → CROSS-CUTTING) に一度に 1 カテゴリーをスイープします。アルゴリズムはスコープ宣言、カテゴリーごとの進捗行、および最終的なカバレッジテーブル (category × file, cells ∈ {clean, N findings, n/a}) を要求します。出力に不足しているカテゴリーは直ちに明白です。

4. コードベースレベルの発見はカテゴリー9 から生じます。 単一ファイルルールは「これら 2 つのコンポーネントは 1 つである必要があります」または「このフックは dead です」とは言えません。カテゴリー9 (Codebase Hygiene) は最後に完全なインベントリをスイープし、remove / dedup / reuse / consolidate 発見を生成します。

単一ファイルのアドホック質問 (「このフックは OK ですか？」) は、関連ルールに直接進むことができます。アルゴリズムはマルチファイルおよび全リポジトリケースに存在します。

ルールカテゴリー

#	カテゴリー	影響	ルール	主要トピック
1	Concurrent Rendering	CRITICAL	6	useTransition、useDeferredValue、Activity、batching、render purity
2	Server Components	CRITICAL	6	RSC 境界、データフェッチング、ストリーミング、シリアライズ可能なプロップ
3	Actions & Forms	HIGH	5	Form actions、declarative form state、useOptimistic、server validation
4	Data Fetching	HIGH	7	use() フック、cache()、Suspense、document metadata、resource hints
5	State Management	MEDIUM-HIGH	5	Derived values、context split、functional updates、reducer
6	Memoization & Performance	MEDIUM	5	React Compiler、useMemo、useCallback、React.memo
7	Effects & Events	MEDIUM	5	useEffectEvent、cleanup、external stores、derived-state アンチパターン
8	Component Patterns	LOW-MEDIUM	5	ref-as-prop、composition、controlled vs uncontrolled、key reset
9	Codebase Hygiene	CROSS-CUTTING	5	Dedup、consolidation、dead code、boundary coherence、prop-shape drift

クイックリファレンス

重大なパターン — これらを最初に正しく：

• Server Components でデータをフェッチし、Client Components ではしない
• 'use client' 境界を可能な限り低く推し下げる
• 高コストなノンブロッキング更新に startTransition を使用する
• タブ/ページ切り替え間でステートを保持するために <Activity> を使用する

React 19 モダンイディオム (React 18 パターンを生成しないでください):

• function C({ ref, ...props }) — forwardRef でラップしない
• <MyContext value={v}> — <MyContext.Provider> を使用しない
• useActionState — useFormState を使用しない
• useRef<T>(null) — 常に初期値を渡す
• <title>、<meta>、<link> をインラインでレンダーする — react-helmet に手を出さない
• react-dom から preload/preconnect を使用する — <link rel="preload"> を手動でレンダーしない

一般的な単一ファイルの間違い — これらのアンチパターンを回避：

• Client Components 内で use() 用のプロミスを作成する (無限ループを引き起こす)
• すべてをメモ化する (代わりに React Compiler v1.0+ を使用)
• derived state、mutations、親への通知、またはアプリ init に effects を使用する
• 'use client' をコンポーネントツリーの高すぎる位置に配置する

コードベースレベルのパターン — カテゴリー9 スイープでこれらを表面化：

• 0 個のインポーターを持つコンポーネント/フック/ユーティリティ — 削除
• 同じ effect/state 形状を持つ 2+ ファイル — 共有フックを抽出
• ドリフトがあるラベル/アイコンで構造的に同一の 2+ コンポーネント — バリアントまたは composition で統合
• クライアント実行を必要としないフック使用法を持つ 'use client' ファイル — Server Components に降格 (またはサーバー親 + クライアントアイランドに分割)
• コンポーネント間で異なる名前で伝達される同じ概念的プロップ — 標準的な名前に収束

目次

1. Concurrent Rendering — CRITICAL
   • 1.1 ナビゲーション間でアンマウントする代わりに隠れたサブツリーステートを保持する — HIGH (<Activity>)
   • 1.2 遷移内の更新をラップしてナビゲーション間で以前のコンテンツを表示する — HIGH
   • 1.3 自動バッチングを信頼 — flushSync または unstable_batchedUpdates に手を出さない — HIGH
   • 1.4 高コストな子再レンダリングをドライブする値がない場合は、その値を遅延させる — CRITICAL (useDeferredValue)
   • 1.5 高コストなステート更新をロープライオリティとしてマークし、入力の応答性を保つ — CRITICAL (useTransition)
   • 1.6 レンダーを純粋に保つ — render 中に変更、subscribe、または外部ステートを読まない — MEDIUM-HIGH
2. Server Components — CRITICAL
   • 2.1 ブラウザ API に依存するライブラリを Client Component ラッパーの中に隔離 — MEDIUM-HIGH
   • 2.2 遅い async 作業を独自の Suspense 境界の背後に分割し、高速コンテンツを最初にストリーミング — MEDIUM-HIGH
   • 2.3 サーバーで async/await を使用してデータを取得 — Client Component で useEffect+fetch を決して使用しない — CRITICAL
   • 2.4 'use client' 境界をルートではなく、インタラクティブなリーフまで押し下げる — CRITICAL
   • 2.5 RSC ワイヤー形式がエンコードできるデータだけが server→client 境界を越える — HIGH
   • 2.6 サーバーコンテンツはインポートされることによってではなく、children または named slots を通じて Client Component の中に到達 — HIGH
3. Actions & Forms — HIGH
   • 3.1 フォーム送信を JS のみの onSubmit ハンドラーではなく action プロップを通じて配線 — HIGH
   • 3.2 命令型の pending/error/submit ブックキーピングを単一の declarative form-state フックに持ち上げる — HIGH (useActionState)
   • 3.3 送信ボタンは prop ドリル内ではなく context から親フォーム pending ステートを読む — MEDIUM-HIGH (useFormStatus)
   • 3.4 ポストミューテーション結果を自動的に即座に表示し、失敗時にロールバック — HIGH (useOptimistic)
   • 3.5 検証をサーバーアクション上の関心として扱う、クライアントチェックは拡張であり決して唯一のゲートではない — MEDIUM
4. Data Fetching — HIGH
   • 4.1 独立したフェッチは並行実行 — 順序付き await はウォーターフル — MEDIUM-HIGH
   • 4.2 リクエストごとにデータフェッチャーをメモ化し、同じデータを読む複数のコンポーネントが再フェッチしない — HIGH (cache())
   • 4.3 各 Suspense 境界は Error Boundary でラップが必要 — 失敗は含まれている必要がある — MEDIUM
   • 4.4 ローディング状態は if (loading) return … から組み立てられるのではなく、Suspense フォールバックとして宣言される — HIGH
   • 4.5 useEffect+useState 配管ではなく use() でプロミスと条件付き context を読む — HIGH (use())
   • 4.6 ページメタデータが <title>/<meta>/<link> インラインとしてレンダー — helmet スタイルのヘッドマネージャーを drop — MEDIUM
   • 4.7 手動でレンダーされた <link rel="preload"> ではなく react-dom からの命令型リソースヒント API に到達 — MEDIUM
5. State Management — MEDIUM-HIGH
   • 5.1 派生値を render 本体で計算 — 決して separate state にミラーリングしない — MEDIUM
   • 5.2 各 context は 1 つの独立して変更されるステートを保持 — fat context を分割 — MEDIUM
   • 5.3 次のステートが前のものに依存する場合、setX(prev => …) を渡す — setX(x + 1) ではなく — MEDIUM-HIGH
   • 5.4 初期値が高コストの場合、useState に関数を渡す — インラインで計算しない — MEDIUM-HIGH
   • 5.5 調整されたマルチフィールドステート遷移は N 個の兄弟 useState セルではなく単一 reducer に存在 — MEDIUM (useReducer)
6. Memoization & Performance — MEDIUM
   • 6.1 測定ベースラインからメモ化 — すべての値とコールバックを useMemo/useCallback で事前ラップしない — MEDIUM
   • 6.2 React Compiler v1.0 を採用 — ビルドにメモ化させ、手動の useMemo/useCallback ノイズを削除 — MEDIUM
   • 6.3 高コストな純粋コンポーネントを memo() でラップ、プロップが実際に安定している場合のみ — MEDIUM
   • 6.4 何か下流がアイデンティティ安定性に依存する場合のみ、コールバックのアイデンティティを安定化 — MEDIUM (useCallback)
   • 6.5 入力が安定しており作業が測定可能に高コストである場合のみ、renders 間の計算をキャッシュ — MEDIUM (useMemo)
7. Effects & Events — MEDIUM
   • 7.1 subscribe、schedule、または connect する effect は、それを破棄するクリーンアップを返す必要がある — MEDIUM
   • 7.2 useEffect は外部システムとの同期用 — derived state、mutations、event logic、親への通知、またはアプリ init には決して使用しない — HIGH
   • 7.3 Effect deps は reference-compared — in-render-constructed objects または arrays ではなく、primitives を渡す — MEDIUM
   • 7.4 effect のコールバック内で最新プロップ/ステートを読む — これらの値が変わる場合、re-subscribe しない — MEDIUM (useEffectEvent)
   • 7.5 useEffect + useState ではなく useSyncExternalStore を通じて外部 mutable ステートに subscribe — MEDIUM
8. Component Patterns — LOW-MEDIUM
   • 8.1 コンポーネントは ref を通常の分割代入プロップとして受け取る — forwardRef ラッパーを drop、ドリルを drop — MEDIUM-HIGH
   • 8.2 何かがすべての変更で値を読む場合のみ controlled state に到達 — そうでない場合は <form action> でアンコントロール済みを推奨 — LOW-MEDIUM
   • 8.3 プロップ数が ~6 を超えて多くのオプションスロットがある場合、children を取得し、呼び出し元に composition させる — LOW-MEDIUM
   • 8.4 stateful child のアイデンティティを編集する entity にタイ、key={entity.id} を設定 — stale ステートを React が破棄させる — LOW-MEDIUM
   • 8.5 親がレンダリングを制御する必要がある場合のみ render prop を使用 — ロジック再利用の場合、カスタムフックを推奨 — LOW-MEDIUM
9. Codebase Hygiene — CROSS-CUTTING (マルチファイル発見、全リポジトリ監査に必須)
   • 9.1 重複した effect/state 形状を shared hook に抽出 — HIGH
   • 9.2 near-duplicate コンポーネントをバリアントまたは composition でそれぞれ 1 つに統合 — HIGH
   • 9.3 0 個のインポーターを持つコンポーネント、フック、ユーティリティを削除 — MEDIUM-HIGH
   • 9.4 フック使用法がクライアントを必要としない 'use client' ファイルを降格 — HIGH
   • 9.5 同じ概念がコンポーネント間で異なるプロップ名を持つ場合、標準的な名前に収束 — MEDIUM-HIGH

リファレンス

1. https://react.dev
2. https://react.dev/blog/2024/04/25/react-19-upgrade-guide
3. https://react.dev/blog/2024/12/05/react-19
4. https://react.dev/blog/2025/10/01/react-19-2
5. https://react.dev/blog/2025/10/07/react-compiler-1
6. https://react.dev/learn/you-might-not-need-an-effect
7. https://github.com/facebook/react

関連スキル

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