React useMemoの使い所と役割

ReactのuseMemoがどういう役割を持っていて、いつどのような状況の時に使うべきかを紹介します。また、useCallbackとよく違いを知るためにuseCallbackの使い所と役割はこちらも参考にしてみてください。

それでは、useMemoの役割を紹介します。 useMemoはその名の通りmemo化をするもので、関数の結果をメモ化する時に使います。

重たい処理がありその結果を都度計算したくなく、ある状態が変化した時だけ再計算してつかいた時に使うものです。下記を見てもらえれば、useMemoがどのようなものかわかるかと思います。

useMemo buttonを押すと、console.log('get favorite function is called', count)が実行されないことがわかるかと思います。これは、useMemoが関数の実行の結果（今回だとreturn "りんご"）を保存して、それを返すものになっているからです。また、useCallbackはgetFavoritFoodCallback("りんご")のように呼び出すのに対して、useMemoは関数が実行された結果を保持するのでgetFavoritFoodを呼びすだけになります。

またcountが更新されると、useCallbackは実行されないのに対して、useMemoでラップしている関数は都度実行されるので、countが更新されるたびに、 console.log('get favorite function is called', count)が実行され、コンソールに値が出るのでそれも見てみると、useMemoがよりわかるかと思います。

import React, { useCallback, useMemo, useState } from "react";
const App = () => {
  const [count, setCount] = useState(0)
  const getFavoritFoodCallback = useCallback((food) => {
    return food
  }, [])
  const getFavoritFood = useMemo(() => {
    console.log('get favorite function is called', count)
    return "りんご"
  },[count])

  console.log("App is called")
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>++</button>
      <button onClick={() => getFavoritFood}>useMemo button</button>
      <button onClick={() => getFavoritFoodCallback('りんご')}>useCallback button</button>
    </>
  );
}

export default App;

useMemoはuseCallbackと同等のことを下記のようにするとできますが、本来の役割は大きく異なることがわかったと思います。ちなみに、この場合は、() => fnの結果を保存する、つまり関数の参照を保存するので、useCallbackと同じ機能を持つこともできますが、本来は関数の結果を保存するものなので、その違いもわかったかと思います。

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

参考: useCallbackの使い方と役割

参考: How to Memoize with React.useMemo()

参考: useMemo