15.1 最適化の順序

  1. ユーザーが感じる問題を確認
  2. DevToolsで計測
  3. ボトルネックを特定
  4. データ構造・アルゴリズムを改善
  5. コンポーネント境界を改善
  6. Compiler・メモ化を検討
  7. 再計測

15.2 よくある本当の原因

  • 巨大な一覧
  • 重い同期計算
  • 不必要なネットワーク待機
  • 直列データ取得
  • 過大なJavaScript bundle
  • Contextの広範囲更新
  • Effectによる更新ループ
  • レイアウトシフト
  • 画像最適化不足
  • サーバー応答遅延

15.3 memo

const Row = memo(function Row({ item }: { item: Item }) {
  return <li>{item.name}</li>;
});

propsが毎回新しいオブジェクト・関数なら効果が弱い。Compiler利用時は自動最適化との重複を確認する。

15.4 リスト仮想化

数千行を同時にDOMへ配置せず、表示範囲だけ描画する。
ただしアクセシビリティ、検索、印刷、可変高さ、スクロール復元などの要件を確認する。

15.5 コード分割

ルートや大きな機能単位で分割する。

const Analytics = lazy(() => import("./Analytics"));

小さなコンポーネントを過剰に分割すると、ネットワーク・管理コストが増える。

15.6 Context分割

更新頻度が異なる値を同じContextにまとめない。

<AuthContext value={auth}>
  <ThemeContext value={theme}>
    <App />
  </ThemeContext>
</AuthContext>

15.7 Transition

検索結果更新やタブ切り替えなど、現在の操作感を維持したい更新に使う。
遅い処理そのものを高速化するAPIではなく、更新の優先度を調整する。