問題一覧に戻る
上級パフォーマンス最適化
問題87: プロファイリング

パフォーマンスボトルネックを特定するためのReactアプリケーションのプロファイリング方法を学びます。Profiler APIはコンポーネントのレンダリング時間とフェーズを測定します。React DevTools Profilerはレンダリングパフォーマンスの視覚的分析を提供します。このデータを使用して遅いコンポーネントを見つけて最適化します。複雑なアプリケーションでパフォーマンスを維持するために必須です。

import React, { Profiler, useState } from 'react';

{/* Profilerコールバック関数 */}
const onRender = (id, phase, actualDuration) => {
  console.log(`${id} (${}) took ${actualDuration}ms`);
};

{/* 高価な計算 */}
function ExpensiveList({ items }) {
  const filtered = items.filter(item => {
    // Simulate expensive computation
    let sum = 0;
    for (let i = 0; i < 1000000; i++) sum += i;
    return item.includes('1');
  });
  
  return (
    <ul>
      {filtered.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

function App() {
  const [count, setCount] = useState(0);
  const items = ['Item 1', 'Item 2', 'Item 11'];

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      
      {/* Profilerでラップ */}
      < id="ExpensiveList" onRender={}>
        <ExpensiveList items={items} />
      </>
      
      {/* DevToolsのリマインダー */}
      { && (
        <p>Open React DevTools  tab!</p>
      )}
    </div>
  );
}

export default App;