Should You Really Use useMemo in React? Let’s Find Out.

Some of our developers recently came with the question, when should I use useMemo in React? That is an excellent question. In this article, we will have a scientific approach, define a hypothesis, and test this with real-life benchmarks in React.

Read on to find out what the performance impact of useMemo is.

What is useMemo?

UseMemo is one of the hooks offered by React. This hook allows developers to cache the value of a variable along with a dependency list. If any variables in this dependency list changes, React will re-run the processing for this data and re-cache it. If the variable values in the dependency list have already been cached before, React takes the value from the cache.

This mostly has an effect on re-renders of components. Once the component re-renders, it will fetch the value from the cache instead of having to loop through an array or process data again and again.

What does React say about useMemo?

If we look at the React documentation regarding useMemo it is not mentioned when it should be used. They simply mention what it does and how it can be used.

You may rely on useMemo as a performance optimization

The question here is, from what point on is useMemo interesting? How complex or big should the data be before we see performance advantages in using useMemo? When should developers…