useCallbackとuseMemoを使いこなすためのヒント：パフォーマンス向上のためのベストプラクティス

2024-04-02

React.jsにおけるuseCallbackとuseMemoの実用的な違い

useCallback

useCallbackは、関数自体をキャッシュします。つまり、関数オブジェクトの参照が同じであれば、たとえ関数内の値が変わっていても、再レンダリング時に再実行されません。

useCallbackの使い所

子コンポーネントにコールバック関数を渡す場合
カスタムフックで関数を返す場合
頻繁に更新される値に基づいて別の関数を作成する場合

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    // 高価な処理
    const result = expensiveCalculation(count);

    // 結果を更新
    setCount(result);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
};

この例では、handleClick関数はcountの値に基づいて計算を行うため、countが更新されるたびに再実行されます。しかし、useCallbackを使うことで、countが変わっても関数オブジェクト自体はキャッシュされるため、実際の再実行は必要最低限に抑えられます。

useMemo

useMemoは、関数の呼び出し結果をキャッシュします。つまり、関数内の値が変わらなければ、再レンダリング時に再実行されません。

useMemoの使い所

高価な計算を行う関数
レンダリングに影響を与えない値を計算する場合

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    // 高価な処理
    const result = expensiveCalculation(count);

    return result;
  }, [count]);

  return (
    <div>
      {memoizedValue}
    </div>
  );
};

useCallbackとuseMemoの比較

機能	useCallback	useMemo
キャッシュ対象	関数自体	関数の呼び出し結果
再実行条件	関数オブジェクトの参照が変わ	関数内の値が変わ
典型的な使用例	コールバック関数、カスタムフック	高価な計算、頻繁に更新される値

このサンプルコードでは、useCallbackを使って、子コンポーネントにコールバック関数を渡しています。

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    // 親コンポーネントの `count` を更新
    setCount(count + 1);
  }, []);

  return (
    <div>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

const ChildComponent = ({ handleClick }) => {
  return (
    <div>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
};

このコードでは、ParentComponentはChildComponentにhandleClickというコールバック関数を渡しています。handleClick関数は、ParentComponentのcountを更新します。

useCallbackを使わなかった場合、ParentComponentが再レンダリングされるたびに、ChildComponentに渡されるhandleClick関数は新しい関数オブジェクトになります。

useMemoのサンプルコード

このサンプルコードでは、useMemoを使って、高価な計算を行う関数の結果をキャッシュしています。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    // 高価な処理
    const result = expensiveCalculation(count);

    return result;
  }, [count]);

  return (
    <div>
      {memoizedValue}
    </div>
  );
};

このコードでは、expensiveCalculation関数はcountの値に基づいて計算を行うため、countが更新されるたびに再実行されます。

しかし、useMemoを使うことで、計算結果がキャッシュされるため、実際の計算は必要最低限に抑えられます。

useCallbackとuseMemoの比較

機能	useCallback	useMemo
キャッシュ対象	関数自体	関数の呼び出し結果
再実行条件	関数オブジェクトの参照が変わ	関数内の値が変わ
典型的な使用例	コールバック関数、カスタムフック	高価な計算、頻繁に更新される値

useCallbackとuseMemoの代替案

useCallbackの代替案

shouldComponentUpdateは、コンポーネントが更新される必要があるかどうかを判断するライフサイクルメソッドです。このメソッドをオーバーライドすることで、不要な再レンダリングを抑制することができます。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  shouldComponentUpdate(nextProps, nextState) {
    // propsとstateの変化をチェック
    if (this.props.count === nextProps.count) {
      return false;
    }

    return true;
  }

  return (
    <div>
      {count}
    </div>
  );
};

この例では、count以外のpropsやstateが変化した場合のみ、コンポーネントを更新するようにしています。

PureComponentは、shouldComponentUpdateをデフォルトで実装しているReact.jsのコンポーネントです。PureComponentは、propsとstateの浅い比較を行い、変化がない場合は再レンダリングを抑制します。

class MyComponent extends React.PureComponent {
  render() {
    const { count } = this.props;

    return (
      <div>
        {count}
      </div>
    );
  }
}

この例では、MyComponentはPureComponentを継承しているので、propsとstateの浅い比較に基づいて再レンダリングが抑制されます。

useMemoの代替案

memoは、React.js v16.6で導入された高階コンポーネントです。memoは、コンポーネントをラップして、propsの変化に基づいて再レンダリングを抑制します。

const MyComponent = ({ count }) => {
  return (
    <div>
      {count}
    </div>
  );
};

const MemoizedComponent = memo(MyComponent);

この例では、MyComponentをmemoでラップすることで、count以外のpropsの変化では再レンダリングが抑制されます。

useRefは、レンダリング間で値を保持するために使用できるフックです。useRefを使って、高価な計算結果を保持することができます。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const memoizedValue = useRef(null);

  useEffect(() => {
    // 高価な処理
    const result = expensiveCalculation(count);

    memoizedValue.current = result;
  }, [count]);

  return (
    <div>
      {memoizedValue.current}
    </div>
  );
};