React のパフォーマンスは『何度も再描画される箇所』を狙う
React は便利な一方、無自覚な再描画でパフォーマンス問題を起こしやすい特徴があります。本記事では編集部の視点で、最適化技法を公開情報をもとに整理します。React 学習ロードマップ もご参考に。
計測が先、最適化は後
(1) React DevTools Profilerで再描画頻度。(2) Chrome DevToolsでレンダリング時間。(3) web-vitalsで実ユーザーデータ。(4) Lighthouseで総合評価。(5) 本番環境で計測：開発と乖離。Chrome DevTools 実践 も合わせて。
useMemo / useCallback の使い分け
(1) useMemo：重い計算の結果を保持。(2) useCallback：関数参照の安定。(3) 過度な最適化は逆効果：依存比較コスト。(4) React.memo：コンポーネント単位のメモ化。(5) React Compiler (実験的)：自動メモ化。プロファイル結果に基づいて適用するのが原則です。
Server Components の活用
(1) Client JSの削減：バンドル小型化。(2) サーバーで重い処理：DB アクセス等。(3) Client境界の最小化：use client は末端で。(4) RSC payload：差分配信。(5) Suspenseと組み合わせ。Next.js App Router もご参考に。
Concurrent Mode と Transitions
(1) useTransition：低優先度更新。(2) useDeferredValue：値の遅延。(3) Suspense：宣言的ローディング。(4> 選択肢の遅延適用：UX改善。(5) INP 改善：操作応答性向上。Web Vitals 最適化 も合わせて。
大規模リストの最適化
(1) 仮想化：react-window / react-virtual。(2) キー設計：安定IDを使う。(3) ページネーション：表示分割。(4) 無限スクロール：Intersection Observer。(5) 遅延描画：startTransition で。
本番運用での監視
(1) Sentry / Datadog RUM。(2) Core Web Vitals 計測。(3) ユーザーセグメント別。(4) デバイス別。(5) SLO 設定：LCP < 2.5s 等。Observability 実践 もご参考に。
失敗しがちなパターン
(1) 全コンポーネントに React.memo：逆効果。(2) useEffect の無限ループ。(3) Context 過剰使用：再描画爆発。(4) キー = index：誤った再利用。(5) 本番でのみ問題：開発では見えない。対策は、(1)プロファイル後に適用、(2)依存配列の精査、(3)分割 Context、(4)安定ID、(5)RUM 必須、です。