問題一覧に戻る
上級パフォーマンス最適化
問題81: useMemo

高価な計算のためのuseMemoでパフォーマンスを最適化する方法を学びます。メモ化は計算結果をキャッシュし、依存関係が変更された場合のみ再計算します。レンダーサイクルでの不要な再計算を防ぐために必須です。大きなリストのフィルタリング、複雑な計算、頻繁な更新が不要な高価なオブジェクトの作成に使用します。

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

function ExpensiveList({ items, filter }) {
  {/* フィルター済みアイテムをメモ化 */}
  const filteredItems = (
    () => {
      console.log('Filtering...');
      return items.filter(item => item.includes(filter));
    },
    [, ]
  );

  return (
    <ul>
      {filteredItems.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);
  
  {/* アイテム配列をメモ化 */}
  const items = (() => 
    Array.from({ length: 1000 }, (_, i) => `Item ${i}`),
    []
  );

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <ExpensiveList items={} filter={filter} />
    </div>
  );
}

export default App;