Difference between useEffect and useMemo

Question

I'm trying to wrap my head around what exactly the useMemo() React hook is.

Suppose I have this useMemo:

const Foo = () => {
  const message = useMemo(() => {
    return readMessageFromDisk()
  }, [])

  return <p>{message}</p>
}

Isn't that exactly the same as using a useState() and useEffect() hook?

const MyComponent = () => {
  const [message, setMessage] = useState('')
  
  useEffect(() => {
    setMessage(readMessageFromDisk())
  }, [])

  return <p>{message}</p>
}

In both cases the useMemo and useEffect will only call if a dependency changes.

And if both snippes are the same: what is the benefit of useMemo?

Is it purely a shorthand notation for the above useEffect snippet. Or is there some other benefit of using useMemo?

Answer 1

useEffect is used to run the block of code if the dependencies change. In general you will use this to run specific code on the component mounting and/or every time you're monitoring a specific prop or state change.

useMemo is used to calculate and return a value if the dependencies change. You will want to use this to memoize a complex calculation, e.g. filtering an array. This way you can choose to only calculate the filtered array every time the array changes (by putting it in the dependency array) instead of every render.

useMemo does the same thing as your useEffect example above except it has some additional performance benefits in the way it runs under the hood.