react-best-practices

React のベストプラクティス

クライアントサイドの React アプリケーション向けパフォーマンス最適化ガイドです。影響度の高い順に、8 つのカテゴリにわたる 47 のルールを収録しています。Vercel Engineering のガイドラインをもとに、クライアントサイドのみの React + Vite 向けに調整しています（Next.js／SSR は対象外です）。

適用するタイミング

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

• 新しい React コンポーネントやフックを作成するとき
• パフォーマンスの問題がないかコードをレビューするとき
• 既存の React コードをリファクタリングするとき
• バンドルサイズやレンダリングパフォーマンスを最適化するとき
• useEffect の使用箇所を作成またはレビューするとき

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

優先度	カテゴリ	影響度	プレフィックス
1	ウォーターフォールの排除	CRITICAL	async-
2	バンドルサイズの最適化	CRITICAL	bundle-
3	クライアントサイドのデータ取得	MEDIUM-HIGH	client-
4	再レンダリングの最適化	MEDIUM	rerender-
5	useEffect のパターン	MEDIUM	useeffect-
6	レンダリングパフォーマンス	MEDIUM	rendering-
7	JavaScript のパフォーマンス	LOW-MEDIUM	js-
8	高度なパターン	LOW	advanced-

クイックリファレンス

1. ウォーターフォールの排除（CRITICAL）

• async-defer-await — await は実際に必要な分岐の中に移動する
• async-parallel — 独立した処理には Promise.all() を使う
• async-dependencies — 一部の処理に依存関係がある場合は、プロミスチェーンを使う
• async-api-routes — プロミスを早めに開始し、await は遅らせる

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

• bundle-barrel-imports — 直接インポートし、バレルファイルは避ける
• bundle-conditional — 機能が有効になったときだけモジュールを読み込む
• bundle-defer-third-party — マウント後に分析／ロギングを読み込む
• bundle-preload — 体感速度を高めるため、ホバー／フォーカス時にプリロードする

3. クライアントサイドのデータ取得（MEDIUM-HIGH）

• client-event-listeners — グローバルイベントリスナーを重複させない
• client-passive-event-listeners — スクロール／タッチにはパッシブリスナーを使う
• client-swr-dedup — SWR を使ってリクエストを自動的に重複排除する
• client-localstorage-schema — localStorage のデータにバージョンを付け、最小限に保つ

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

• rerender-derived-state-no-effect — effect ではなく、レンダリング中に state を導出する
• rerender-defer-reads — コールバックでしか使わない state を購読しない
• rerender-simple-expression-in-memo — 単純なプリミティブ値には memo を使わない
• rerender-memo-with-default-value — デフォルトの非プリミティブ props はコンポーネントの外に定義する
• rerender-memo — コストの高い処理をメモ化したコンポーネントに切り出す
• rerender-dependencies — effect の依存関係にはプリミティブ値を使う
• rerender-move-effect-to-event — インタラクションのロジックはイベントハンドラーに記述する
• rerender-derived-state — 生の値ではなく、導出した真偽値を購読する
• rerender-functional-setstate — コールバックを安定させるため、関数形式の setState を使う
• rerender-lazy-state-init — コストの高い値には、関数を useState に渡す
• rerender-transitions — 緊急性の低い更新には startTransition を使う
• rerender-use-ref-transient-values — 頻繁に変化する一時的な値には ref を使う

5. useEffect のパターン（MEDIUM）

• useeffect-anti-patterns — よくある誤り：effect 内での導出 state、effect の連鎖、親への通知
• useeffect-alternatives — 判断フローと代替手段：導出 state、key prop、イベントハンドラー、useSyncExternalStore

6. レンダリングパフォーマンス（MEDIUM）

• rendering-animate-svg-wrapper — SVG 要素ではなく、div のラッパーをアニメーションさせる
• rendering-content-visibility — 長いリストには content-visibility を使う
• rendering-hoist-jsx — 静的な JSX はコンポーネントの外に切り出す
• rendering-svg-precision — SVG 座標の精度を下げる
• rendering-conditional-render — 条件分岐には && ではなく三項演算子を使う
• rendering-usetransition-loading — ローディング状態には useTransition を優先する

7. JavaScript のパフォーマンス（低〜中）

• js-batch-dom-css — レイアウトのスラッシングを避けるため、DOM の読み取りと書き込みをまとめる
• 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 — 関数から早期に戻る
• js-hoist-regexp — ループの外で RegExp の作成を行う
• js-min-max-loop — 最小値／最大値の取得には sort ではなくループを使う
• js-set-map-lookups — O(1) の検索には Set/Map を使う
• js-tosorted-immutable — 不変性を保つために toSorted() を使う

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

• advanced-init-once — アプリの読み込みごとに 1 回だけアプリを初期化する
• advanced-event-handler-refs — イベントハンドラーを refs に保存する
• advanced-use-latest — 安定したコールバック refs には useEffectEvent を使う

使用方法

詳しい説明とコード例については、個々のリファレンスファイルをお読みください。

references/async-parallel.md
references/rerender-derived-state-no-effect.md
references/useeffect-anti-patterns.md

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

• 重要な理由についての簡単な説明
• 誤ったコード例とその説明
• 正しいコード例とその説明
• 追加の背景情報と参考資料