React useMemo — 高コスト計算のキャッシュと安定した参照

useMemoによる計算のキャッシュ

useMemoは再レンダリング間で計算結果をキャッシュし、依存関係が変更されたときのみ再計算します。

基本的な使い方

const sortedItems = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

useMemoが役立つとき

1. 高コストな計算：数千のアイテムのフィルタリング/ソート、複雑な数学計算
2. 参照の安定化：参照等価性をチェックする子コンポーネントの再レンダリングを防止
3. 派生状態：propsや状態から値を計算し、独自のuseStateが不要な場合

useMemoを使うべきでないとき

• 些細な計算（文字列連結、単純な算術）
• 依存関係が毎レンダリングで変更される場合（キャッシュが無効になる）
• セマンティックな保証として -- Reactはメモリ圧迫時にキャッシュされた値を破棄する場合がある

まずプロファイリング

useMemoを追加する前に、React DevToolsプロファイラーを使用して、計算が実際にボトルネックであることを確認してください。不要なメモ化は複雑さとメモリオーバーヘッドを追加します。