React コンポーネントパフォーマンス

概要

レンダリングのボトルネックを特定し、高コストな更新を分離し、UI の動作を変えない形で対象を絞った最適化を適用します。

ワークフロー

1. 遅延を再現するか説明する。
2. 何が再レンダリングを引き起こしているかを特定する（状態更新、props の変動、エフェクト）。
3. 急速に変動する状態を重い部分木から分離する。
4. props とハンドラーを安定化させ、効果がある場合はメモ化する。
5. 高コストな処理を削減する（計算、DOM サイズ、リスト長）。
6. 検証：React DevTools Profiler を開く → インタラクションを記録 → Flamegraph でレンダリングに ~16 ms 以上かかっているコンポーネントを検査 → 最適化前のベースライン記録と比較する。

チェックリスト

• 計測：React DevTools Profiler またはレンダリングログを使用してベースラインを取得する。
• 変動を見つける：タイマー、スクロール、入力、またはアニメーションで更新される状態を特定する。
• 分割：tick する状態を子要素に移動し、重いリストは静的に保つ。
• メモ化：props が安定している場合のみ、leaf 行を memo でラップする。
• Props を安定化：ハンドラーと派生値に useCallback/useMemo を使う。
• レンダー内での派生処理を避ける：事前計算するか、メモ化されたヘルパー内で計算する。
• リストサイズを制御：長いリストはウィンドウ化/仮想化し、隠れたアイテムのレンダリングを避ける。
• キー：安定したキーを確保する；順序が変わる可能性がある場合はインデックスを避ける。
• エフェクト：依存配列を確認する；毎回のレンダリングで再実行されるエフェクトを避ける。
• スタイル/レイアウト：高コストなレイアウトスラッシングや大規模な Markdown/diff レンダリングに注意する。

最適化パターン

Tick する状態を分離する

タイマーやアニメーションカウンターを子要素に移動し、親リストが毎回の tick で再レンダリングされないようにする。

// ❌ Before – 親全体（とリスト）が毎秒再レンダリングされる
function Dashboard({ items }: { items: Item[] }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <Clock tick={tick} />
      <ExpensiveList items={items} /> {/* 毎秒再レンダリング */}
    </>
  );
}

// ✅ After – <Clock> だけが再レンダリング；リストはそのまま
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

useCallback + memo でコールバックを安定化する

// ❌ Before – 毎回のレンダリングで新しいハンドラーの参照が生成され、Row の memo を無効化する
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // 毎回のレンダリングで新しい参照
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – 安定したハンドラー；Row は自身の item が変わったときのみ再レンダリング
const Row = memo(({ item, onClick }: RowProps) => (
  <li onClick={() => onClick(item.id)}>{item.name}</li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

派生データはレンダー外で処理する

// ❌ Before – 毎回のレンダリングで再計算される
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // 毎回のレンダリングで実行
  return <p>Total: {total}</p>;
}

// ✅ After – orders が変わったときのみ再計算される
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

その他のパターン

• 行を分割：リスト行をメモ化されたコンポーネントに抽出し、props を限定する。
• 重いレンダリングを遅延：高コストなコンテンツは遅延レンダリングまたは展開まで非表示にする。

プロファイリング検証ステップ

1. React DevTools → Profiler タブを開く。
2. Record をクリック、遅い操作を実行してから Stop をクリック。
3. Flamegraph ビューに切り替え；時間が ~16 ms を超えるコンポーネントラベルが付いたバーは候補となる。
4. Ranked chart を使用して self レンダリング時間でソートし、上位の犯人を対象にする。
5. 一度に 1 つの最適化を適用し、再記録し、レンダリング数と期間をベースラインと比較する。

参考例

ユーザーが具体的なリファクタリング例を求める場合は references/examples.md を読み込む。