Reactベストプラクティス は何をしますか？
Reactアプリケーションのための包括的なパフォーマンス最適化ガイド。影響度で優先順位付けされた7カテゴリ37のルールを提供します。
優先順位別ルールカテゴリ
| 優先順位 | カテゴリ | 影響度 | プレフィックス |
|---|---|---|---|
| 1 | ウォーターフォールの解消 | クリティカル | async- |
| 2 | バンドルサイズ最適化 | クリティカル | bundle- |
| 3 | クライアントサイドデータ取得 | 中～高 | client- |
| 4 | 再レンダリング最適化 | 中 | rerender- |
| 5 | レンダリングパフォーマンス | 中 | rendering- |
| 6 | JavaScriptパフォーマンス | 低～中 | js- |
| 7 | 高度なパターン | 低 | advanced- |
クイックリファレンス
1. ウォーターフォールの解消（クリティカル）
async-defer-await- awaitを実際に使用するブランチに移動するasync-parallel- 独立した操作にはPromise.all()/allSettled()を使用する
2. バンドルサイズ最適化（クリティカル）
bundle-dynamic-imports- 重量コンポーネントにはReact.lazy()を使用bundle-defer-third-party- アナリティクス/ログのオンデマンド読み込みbundle-conditional- 機能が有効になったときのみモジュールを読み込むbundle-preload- ホバー/フォーカス時にプリロードして体感速度向上
3. クライアントサイドデータ取得（中～高）
client-query-dedup- TanStack Queryを使用して自動リクエスト重複排除client-event-listeners- グローバルイベントリスナーの重複排除client-passive-event-listeners- スクロールパフォーマンスにパッシブリスナーを使用client-localstorage-schema- localStorageデータのバージョン管理と最小化
4. 再レンダリング最適化（中）
rerender-defer-reads- コールバック内でのみ使用するステートを購読しないrerender-memo- 重い処理をメモ化されたコンポーネントに抽出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-hoist-jsx- 静的なJSXをコンポーネントの外に抽出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をひとつのループに結合js-length-check-first- 高価な比較の前に配列の長さをチェックjs-early-exit- 関数から早期リターンjs-hoist-regexp- RegExpの生成をループの外に移動js-min-max-loop- ソートではなくループで最小値/最大値を取得js-set-map-lookups- O(1)検索にSet/Mapを使用js-tosorted-immutable- 不変性のためにtoSorted()を使用
7. 高度なパターン（低）
advanced-event-handler-refs- イベントハンドラーをrefに格納advanced-use-latest- 安定したコールバックrefにはuseLatestを使用
使用方法
references/内の各ルールファイルには、説明、誤ったコード例と正しいコード例、およびコンテキストが含まれています。必要に応じて個別のファイルを参照してください。