React基礎｜useMemoとは？使い方とuseEffectとの違いを解説

🔍 useMemoとは？検索機能での実用例から学ぶ

React の useMemo は、特定の値（依存）が変わらない限り、過去に計算した値を再利用（メモ化）するためのフック。
これにより、無駄な再計算を防ぎ、パフォーマンスを最適化できる。

たとえば、莫大なデータを検索窓でフィルタする機能があったとして、同じ文字列で何度検索しても回答は同じなのに filter() の処理が毎回走るのはパフォーマンス的に良くない。

✅ useMemoなら再計算(filter())が発生しない

const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(value));
}, [items, value]);

• 入力する検索文字列（value）が変わったときだけ filter() が実行される
• データ配列（items）が変わらなければ、同じ検索文字列で再レンダリングしても再計算されない
• 前回の結果（フィルタ済み配列）をそのまま再利用してくれる

⚡️useMemoとuseEffectとの違い

同じように依存があるuseEffectと何が違うのか疑問に思った。useEffectの場合、検索文字列（value）を受け取るたびに filter() が実行されその値が返ってくる。

🟡 useEffect を使う場合：

useEffect(() => {
  const result = items.filter(item => item.includes(value));
  setFilteredItems(result); // 再レンダリング後に毎回実行される
}, [items, value]);

• 検索文字列（value） が変わるたびに filter() 実行
• 計算 → setState → 再レンダリング の流れが毎回発生
• React の再レンダリングのたびに副作用が発生して重くなる可能性あり

🟢 useMemo を使う場合：

const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(value));
}, [items, value]);

• items と value が同じなら、filter は再実行されない
• 単なる再レンダリングだけでは計算はスキップ
• 前回の結果（filteredItems）をそのまま再利用して描画できる