計算結果をメモ化し、依存配列が変わらない限り再計算しない。重い計算や参照を保持したいオブジェクトに使う。
const value = useMemo(() => computeExpensiveValue(), dependencies)
const sorted = useMemo<Item[]>(
() => items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
);import { useState, useMemo } from 'react';
function ProductList({ products }: { products: Product[] }) {
const [filter, setFilter] = useState('');
const [sortBy, setSortBy] = useState<'name' | 'price'>('name');
// filter や sortBy が変わったときだけ再計算
const processed = useMemo(() => {
console.log('再計算中...');
return products
.filter(p => p.name.toLowerCase().includes(filter.toLowerCase()))
.sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1);
}, [products, filter, sortBy]);
return (
<>
<input value={filter} onChange={e => setFilter(e.target.value)} />
<ul>{processed.map(p => <li key={p.id}>{p.name}</li>)}</ul>
</>
);
}Reactコンパイラ（React Forget）が普及すれば useMemo を手動で書く必要はなくなる。現時点では計算コストの高い処理に限定して使う。