How to use useMemo Hook in React?

useMemo is a hook that gets overshadowed by useEffect hook in React a lot since just by seeing it looks like both of them do the same thing.

But how useMemo hook is different from useEffect and when should it be used?

useMemo hook is used to memorise a value passed to its dependency array and determines when to execute a function depending on the change in the passed value.

If the passed value is updated and differs from the memorised value in the hook, it will re-execute the function passed to it.

The syntax of useMemo is:

useMemo(() => {a calculating_function}, [dependency array value])

The advantage this gives is that useMemo can memorise expensive functions and only execute when the dependency changes.

useEffect can call the function passed to it, but depending on the way it is implemented, a lot of redundant execution can happen. Ideally, a useEffect should only be used as a side effect of some state change which can be caused by some action that might be taken by a user.

Advantages

First, let's start with the Advantages of useMemo hook, then we will look into useMemo in more detail

• Skips expensive repetitive calculations - If the value is not updated on re-render, useMemo will not re-run the calculating_function . If the values update to something different value, then it will execute.

• Skipping component re-rendering - Continuing on the above explanation, a calculating_function can also return a child component which will only re-render when the value changes.

• Performance boost - by memorising compute-intensive values in a useMemo hook you can increase the response time of your application

There are more, but these should cover your reasons for learning about useMemo.

Under the hood

Internally useMemo works by memorising the result of a function given to it. When the function is given to the hook, React executes it and memorises the result value. It also remembers the values of dependencies passed to it from the last render.

If the values of dependencies have changed since the last render, React will execute the function passed to useMemo, memorise the new output result and also return it. But, if there is no change in the dependency values from the last render, the hook just returns the memorised value of the function without executing it.

React internally implements a cache system to memorise the results of the function and dependency values. These cache memories are associated with component instances and so can persist even if the component re-renders many times.

Another difference between the useMemo and useEffect hooks are the type of variables that are passed into their dependency array. For useEffect you pass a state variable whose state can be updated by some action of the user. Once the state is updated, the hook useEffect will re-render the code. On the other hand, you can use both simple let variables and state variables together in dependency array of a useMemo hook. The change in such values will re-execute the function passed it, which won't work on useEffect.

A proper use of correct hooks can give a good boost to the performance of your website or application. With decreasing attention-span of the consumer, this can be a game changer.