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

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

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>
  );
};

この例では、expensiveCalculation関数はcountの値に基づいて計算を行うため、countが更新されるたびに再実行されます。しかし、useMemoを使うことで、計算結果がキャッシュされるため、実際の計算は必要最低限に抑えられます。

useCallbackとuseMemoの比較

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関数は新しい関数オブジェクトになります。

しかし、useCallbackを使うことで、countが変わっても関数オブジェクト自体はキャッシュされるため、ChildComponentに渡されるhandleClick関数は常に同じ関数オブジェクトになります。

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を使うことで、計算結果がキャッシュされるため、実際の計算は必要最低限に抑えられます。

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

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の浅い比較に基づいて再レンダリングが抑制されます。

memo

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

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

const MemoizedComponent = memo(MyComponent);

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

useRef

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>
  );
};

この例では、useRefを使って、expensiveCalculation関数の結果をmemoizedValueという変数に保持しています。countが更新された場合のみ、expensiveCalculation関数が実行されます。