React パフォーマンス最適化

メモ化、コード分割、仮想化、効率的なレンダリング戦略を通じて React アプリケーションのパフォーマンスを最適化するための専門的なガイダンス。

このスキルを使用する場合

• レンダリング速度が遅い React コンポーネントの最適化
• 初期ロード時間を短縮するためのバンドルサイズ削減
• 大きなリストやデータテーブルのレスポンスシビリティ改善
• 複雑なコンポーネントツリーにおける不要なリレンダーの防止
• レンダーカスケードを削減するための状態管理の最適化
• コード分割を使用した知覚的パフォーマンス改善
• React DevTools Profiler を使用したパフォーマンス問題のデバッグ

コアコンセプト

React レンダリング最適化

React はプロップまたは状態が変更されるとコンポーネントをリレンダーします。不要なリレンダーは CPU サイクルを無駄にしユーザー体験を低下させます。主な最適化テクニック:

• メモ化: コンポーネントレンダーと計算値をキャッシュ
• コード分割: 初期ロード時間を短縮するためにオンデマンドでコードをロード
• 仮想化: 表示されているリストアイテムのみをレンダー
• 状態最適化: レンダーカスケードを最小化するために状態を構造化

最適化するタイミング

1. 最初にプロファイリング: React DevTools Profiler を使用して実際のボトルネックを特定
2. 影響を測定: 最適化がパフォーマンスを改善することを確認
3. 早すぎる最適化を避ける: 高速なコンポーネントを最適化しない

クイックリファレンス

必要に応じて詳細なパターンと例をロード:

トピック	リファレンスファイル
React.memo、useMemo、useCallback パターン	skills/react-performance-optimization/references/memoization.md
lazy/Suspense によるコード分割、バンドル最適化	skills/react-performance-optimization/references/code-splitting.md
大規模リストの仮想化 (react-window)	skills/react-performance-optimization/references/virtualization.md
状態管理戦略、コンテキスト分割	skills/react-performance-optimization/references/state-management.md
useTransition、useDeferredValue (React 18+)	skills/react-performance-optimization/references/concurrent-features.md
React DevTools Profiler、パフォーマンス監視	skills/react-performance-optimization/references/profiling-debugging.md
一般的な落とし穴とアンチパターン	skills/react-performance-optimization/references/common-pitfalls.md

最適化ワークフロー

1. ボトルネックの特定

# React DevTools Profiler を開く
# インタラクションを記録 → フレイムグラフを分析 → 遅いコンポーネントを検出

以下を探す:

• 黄色/赤いバーのあるコンポーネント (遅いレンダー)
• 不要なレンダー (同じプロップ/状態)
• すべてのレンダーで実行される高額な計算

2. 対象を絞った最適化を適用

不要なリレンダーの場合:

• React.memo でコンポーネントをラップ
• 安定した関数参照のために useCallback を使用
• プロップ内の インライン オブジェクト/配列を確認

高額な計算の場合:

• useMemo を使用して結果をキャッシュ
• 可能な場合はレンダー外に計算を移動

大規模リストの場合:

• react-window を使用して仮想化を実装
• 適切な一意キーを確認 (インデックスではない)

初期ロードが遅い場合:

• React.lazy を使用してコード分割を追加
• webpack-bundle-analyzer を使用してバンドルサイズを分析
• 重いディペンデンシーに動的インポートを使用

3. 改善を検証

# 新しい Profiler セッションを記録
# 最適化前後のメトリクスを比較
# 最適化が実際に役に立ったことを確認

一般的なパターン

高額なコンポーネントをメモ化

import { memo } from 'react';

const ExpensiveList = memo(({ items, onItemClick }) => {
  return items.map(item => (
    <Item key={item.id} data={item} onClick={onItemClick} />
  ));
});

計算値をキャッシュ

import { useMemo } from 'react';

function DataTable({ items, filters }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => filters.includes(item.category));
  }, [items, filters]);

  return <Table data={filteredItems} />;
}

安定した関数参照

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return <MemoizedChild onClick={handleClick} />;
}

ルートをコード分割

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

大規模リストを仮想化

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={80}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>{items[index].name}</div>
      )}
    </FixedSizeList>
  );
}

よくある間違い

1. 過度なメモ化: シンプルで高速なコンポーネントをメモ化しない (オーバーヘッドが追加される)
2. インラインオブジェクト/配列: 新しい参照がメモ化を破壊 (config={{ theme: 'dark' }})
3. 依存関係の不足: useCallback/useMemo での陳旧した閉鎖
4. インデックスをキーとして使用: リストの順序が変わると調整が破壊される
5. 単一の大きなコンテキスト: 更新時に広範なリレンダーを引き起こす
6. プロファイリングなし: 測定せずに最適化すると時間が無駄になる

パフォーマンスチェックリスト

最適化前:

• React DevTools でプロファイリングしてボトルネックを特定
• 基線パフォーマンスメトリクスを測定

最適化対象:

• 安定したプロップで高額なコンポーネントをメモ化
• useMemo で計算値をキャッシュ (実際に高額な場合)
• メモ化された子に渡される関数に useCallback を使用
• ルートと重いコンポーネントにコード分割を実装
• 100以上のアイテムを持つリストを仮想化
• リストアイテムに安定キーを提供 (インデックスではなく一意の ID)
• 更新頻度による状態を分割
• レスポンスシビリティのために並行機能 (useTransition、useDeferredValue) を使用

最適化後:

• 再度プロファイリングして改善を確認
• バンドルサイズの削減を確認 (該当する場合)
• 機能の回帰がないことを確認

リソース

• React Docs - Performance: https://react.dev/learn/render-and-commit
• React DevTools: プロファイリング用ブラウザ拡張機能
• react-window: https://github.com/bvaughn/react-window
• バンドルアナライザー: webpack-bundle-analyzer、rollup-plugin-visualizer
• Lighthouse: Chrome DevTools パフォーマンス監査