react-best-practices

React のベストプラクティス

パフォーマンスが重視されるプロダクト開発のための、実践的な React および Next.js のガイダンスです。

このスキルは、Vercel の React パフォーマンスガイダンスを独立して利用できる形にまとめたもので、Spellbook に直接インストールして使用できます。

使用する場面

次のような依頼をユーザーから受けた場合に、このスキルを使用します。

• React コンポーネントの構築またはリファクタリング
• Next.js のパフォーマンス改善
• バンドルサイズの削減
• データ取得のウォーターフォールの解消
• コストの高い再レンダリングの修正
• パフォーマンス上の問題についてのフロントエンドコードのレビュー

優先順位

必ず優先度の高いカテゴリから確認してください。

優先度	カテゴリ	焦点
1	ウォーターフォール	非同期処理を早く開始し、遅く待機し、独立したデータ取得を並列化する
2	バンドルサイズ	バレルインポートを避け、重いコードの読み込みを遅らせ、機能ごとに分割する
3	サーバー側のパフォーマンス	処理の重複を排除し、シリアライズを最小限に抑え、サーバーでの実行を優先する
4	クライアントでのデータ取得	リクエストの重複を排除し、不要なリスナーやクライアント側の負荷を避ける
5	再レンダリング	購読を減らし、依存関係を安定させ、コストの高い処理を移動する
6	レンダリング	ハイドレーション時のちらつきを避け、DOM／SVG の負荷を減らし、長いリストを最適化する
7	JavaScript のホットパス	繰り返し行う検索をキャッシュし、反復処理をまとめ、早期に終了する
8	高度なパターン	特殊なケースに対応する安定した参照とコールバックのパターン

厳守事項

1. まずウォーターフォールを解消する

• 独立したリクエストは並列で開始します。
• 実際の依存関係がない限り、非同期処理を直列化しません。
• API ルートやサーバーコンポーネントでは、Promise を早く作成し、できる限り遅く待機します。
• コンテンツのストリーミングによってレンダリングのブロックを解除できる場合は、Suspense 境界を使用します。

2. バンドルサイズを抑える

• ホットパスでは、バレルファイルより直接インポートを優先します。
• 重いコンポーネントや使用頻度の低いコンポーネントには、動的インポートを使用します。
• アナリティクス、ログ記録などの重要度が低いサードパーティコードは、ハイドレーション後まで読み込みを遅らせます。
• 関連する機能が有効になった場合に限り、オプションのモジュールを読み込みます。

3. クライアント側の処理よりサーバー側の処理を優先する

• 可能な場合は、データ取得や重い変換処理をサーバー側で行います。
• クライアントコンポーネントにシリアライズするデータを最小限に抑えます。
• リクエストのモデルが許す場合は、サーバー側で繰り返し行う処理をキャッシュします。

4. 再レンダリングを制御する

• レンダリングに必要な状態だけを購読します。
• 可能な場合は、プリミティブ値を effect の依存関係として使用します。
• 不安定な依存関係をなくせる場合は、関数型の setState を使用します。
• コストの高い状態は遅延初期化します。
• 緊急性の低い UI の更新には startTransition を使用します。

5. レンダリング経路を最適化する

• 適切な場合は、長いリストに仮想化または content-visibility を使用します。
• ラッパーで対応できる場合は、重い SVG ノードを直接アニメーションさせないようにします。
• 本当に定数である静的 JSX は、レンダリング経路の外に移動します。
• レンダリング条件が重要な場合は、脆弱な && 分岐より明示的な三項演算子を優先します。

6. JavaScript のホットスポットを整理する

• 繰り返しメンバーシップを確認する場合は、Map または Set を構築します。
• タイトなループ内で繰り返しアクセスするプロパティや導出結果をキャッシュします。
• パフォーマンスが重視される経路では、隣接する filter／map の処理をまとめます。
• 不要な処理を後続に持ち越すのではなく、分岐から早期に戻ります。

レビューチェックリスト

React または Next.js のコードをレビューする際は、次の点を確認します。

1. 並列化できる逐次的な非同期呼び出しがないか
2. ホットコンポーネントにバレルインポートや大きな依存関係がないか
3. クライアントで取得しているデータをサーバー側に移せないか
4. 不安定なオブジェクト／関数の依存関係を持つ effect やコールバックがないか
5. Map または Set が有効な、リストの繰り返し走査がないか
6. ユーザーから見える読み込み時やハイドレーション時のちらつきがないか

出力に関する期待事項

このスキルを使用する場合、出力では次のことを行います。

• 最も影響の大きいカテゴリを最初に示す
• 現在のパターンがコストの高い理由を説明する
• 効果のある最小限の変更を提案する
• バンドル差分、プロファイラー、レンダー回数の確認など、具体的な検証方法を含める

参考資料

• React ドキュメント：react.dev
• Next.js ドキュメント：nextjs.org
• SWR ドキュメント：swr.vercel.app
• Vercel のエンジニアリング関連パフォーマンス記事