問題一覧に戻る
上級パフォーマンス最適化
問題83: メモ化の使い分け

最適なパフォーマンスのためにuseMemo vs useCallback vs React.memoをいつ使うかを学びます。useMemoは高価な計算からの値をメモ化します。useCallbackは関数参照をメモ化します。React.memoはpropsが変更されていない時のコンポーネント再レンダリングを防ぎます。最適化対象に基づいて選択：値、関数、またはコンポーネント。

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

{/* コンポーネント用のReact.memo */}
const MemoChild = .<Child>(({ data, onClick }) => {
  console.log('MemoChild render');
  return <div onClick={onClick}>{data}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);
  
  {/* 値用のuseMemo */}
  const expensiveValue = (
    () => count * multiplier * 100,
    [count, ]
  );
  
  {/* 関数用のuseCallback */}
  const handleClick = (
    () => setCount(c => c + 1),
    []
  );
  
  return (
    <div>
      <button onClick={() => setMultiplier(m => m + 1)}>x{multiplier}</button>
      <MemoChild data={} onClick={handleClick} />
    </div>
  );
}

export default Parent;