react-best-practices

React のベストプラクティス

Vercel Engineering を参考にした、React アプリケーション向けの包括的なパフォーマンス最適化ガイドです。7 つのカテゴリにわたる 30 のルールを、影響度の高い順に掲載し、自動リファクタリングとコード生成の指針とします。

注：このバージョンは、純粋な React 19.2 向けにカスタマイズされています：

• サーバーサイドのデータ取得と SWR のルールを削除しました（プロジェクトでは react-query を使用しています）
• Next.js 固有のルールを削除しました（next/dynamic、SSR のハイドレーションなど）
• React Compiler が有効です — メモ化のルール（memo、useMemo、useCallback）を削除しました。コンパイラが自動的に処理します

適用するタイミング

次のような場合に、これらのガイドラインを参照してください：

• 新しい React コンポーネントを作成するとき
• パフォーマンス上の問題がないかコードをレビューするとき
• 既存の React コードをリファクタリングするとき
• バンドルサイズや読み込み時間を最適化するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	ウォーターフォールの解消	重大	async-
2	バンドルサイズの最適化	重大	bundle-
3	クライアントサイドのパターン	中～高	client-
4	再レンダリングの最適化	中	rerender-
5	レンダリングのパフォーマンス	中	rendering-
6	JavaScript のパフォーマンス	低～中	js-
7	高度なパターン	低	advanced-

クイックリファレンス

1. ウォーターフォールの解消（重大）

• async-defer-await - 実際に使用する分岐の中に await を移動する
• async-parallel - 独立した処理には Promise.all() を使用する
• async-suspense-boundaries - Suspense を使ってコンテンツをストリーミングする

2. バンドルサイズの最適化（重大）

• bundle-barrel-imports - 直接インポートし、バレルファイルを避ける
• bundle-conditional - 機能が有効になったときだけモジュールを読み込む
• bundle-preload - 体感速度を高めるため、ホバー時やフォーカス時に事前読み込みする

3. クライアントサイドのパターン（中～高）

• client-localstorage-schema - 型安全な localStorage アクセス
• client-passive-event-listeners - スクロールやタッチにはパッシブイベントリスナーを使用する

4. 再レンダリングの最適化（中）

• rerender-defer-reads - コールバックでのみ使用する状態をサブスクライブしない
• rerender-dependencies - エフェクトではプリミティブな依存値を使用する
• rerender-derived-state - 生の値ではなく、派生した真偽値をサブスクライブする
• rerender-functional-setstate - 安定したコールバックには関数形式の setState を使用する
• rerender-lazy-state-init - コストの高い値には useState に関数を渡す
• rerender-transitions - 緊急性の低い更新には startTransition を使用する

5. レンダリングのパフォーマンス（中）

• rendering-animate-svg-wrapper - SVG 要素ではなく、ラッパーの div をアニメーションさせる
• rendering-content-visibility - 長いリストには content-visibility を使用する
• rendering-svg-precision - SVG の座標精度を下げる
• rendering-activity - 表示／非表示には Activity コンポーネントを使用する
• rendering-conditional-render - 条件分岐には && ではなく三項演算子を使用する

6. JavaScript のパフォーマンス（低～中）

• js-batch-dom-css - クラスまたは cssText を使って CSS の変更をまとめる
• js-index-maps - 繰り返し検索する場合は Map を構築する
• js-cache-property-access - ループ内でオブジェクトのプロパティをキャッシュする
• js-cache-function-results - モジュールレベルの Map に関数の結果をキャッシュする
• js-cache-storage - localStorage／sessionStorage の読み取りをキャッシュする
• js-combine-iterations - 複数の filter／map を 1 つのループにまとめる
• js-length-check-first - コストの高い比較の前に配列の長さを確認する
• js-early-exit - 関数から早期に return する
• js-hoist-regexp - ループの外で RegExp を生成する
• js-min-max-loop - 最小値／最大値の取得には sort ではなくループを使用する
• js-set-map-lookups - O(1) の検索には Set／Map を使用する
• js-tosorted-immutable - 不変性を保つために toSorted() を使用する

7. 高度なパターン（低）

• advanced-event-handler-refs - イベントハンドラーを ref に格納する

使用方法

詳しい説明とコード例については、各ルールファイルをお読みください。

rules/async-parallel.md
rules/bundle-barrel-imports.md

各ルールファイルには、次の内容が含まれています。

• 重要である理由の簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加の背景情報と参考資料

完全版ドキュメント

すべてのルールを詳しくまとめたガイドは、AGENTS.md をご覧ください。