react-best-practices

React のベストプラクティス

概要

React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 40 以上のルールが含まれています。自動リファクタリングとコード生成の指針となるよう、ルールは影響度の高い順に優先順位付けされています。

適用する場面

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

• 新しい React コンポーネントや Next.js ページを作成するとき
• データ取得（クライアント側またはサーバー側）を実装するとき
• パフォーマンス上の問題がないかコードをレビューするとき
• 既存の React／Next.js コードをリファクタリングするとき
• バンドルサイズや読み込み時間を最適化するとき

優先順位順のガイドライン

ルールは影響度の高い順に優先順位付けされています。

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

クイックリファレンス

重要なパターン（最初に適用）

ウォーターフォールを排除する：

• 必要になるまで await を遅らせます（分岐の中に移動します）
• 独立した非同期処理には Promise.all() を使用します
• Promise を早めに開始し、遅めに待機します
• 部分的な依存関係には better-all を使用します
• Suspense 境界を使用してコンテンツをストリーミングします

バンドルサイズを削減する：

• バレルファイルからのインポートを避けます（ソースから直接インポートします）
• 重いコンポーネントには next/dynamic を使用します
• 重要度の低いサードパーティライブラリの読み込みを遅らせます
• ユーザーの意図に基づいてプリロードします

影響度の高いサーバー側のパターン

• リクエストごとの重複排除には React.cache() を使用します
• リクエスト間のキャッシュには LRU キャッシュを使用します
• RSC 境界でのシリアライズを最小限に抑えます
• コンポーネントの合成によってデータ取得を並列化します

影響度が中程度のクライアント側のパターン

• リクエストの自動重複排除には SWR を使用します
• 状態の読み取りを使用箇所まで遅らせます
• コストの高い値には遅延状態初期化を使用します
• 派生状態のサブスクリプションを使用します
• 緊急性の低い更新には startTransition を適用します

レンダリングのパターン

• SVG 要素を直接ではなく、SVG のラッパーをアニメーションさせます
• 長いリストには content-visibility: auto を使用します
• インラインスクリプトでハイドレーションの不一致を防ぎます
• 明示的な条件付きレンダリング（&& ではなく ? :）を使用します

JavaScript のパターン

• クラスを使って DOM の CSS 変更をまとめて適用します
• 繰り返しの検索にはインデックスマップを作成します
• 繰り返し呼び出される関数の結果をキャッシュします
• 不変性を保つために sort() の代わりに toSorted() を使用します
• 配列を比較する前に長さを確認します

参考資料

コード例を含む完全なドキュメントは、次のファイルにあります。

• references/react-performance-guidelines.md - すべてのパターンを含む完全なガイド

特定のパターンを検索するには、参考資料を grep してください。

grep -l "suspense" references/
grep -l "barrel" references/
grep -l "swr" references/