Understanding the useMemo hook in React

In programming, and particularly in the front-end world, there is an important concept: that of derived values.

This is also referred to as computed values (or “computed values” in English)

A derived value is simply a new piece of data, created from one or more other existing pieces of data.

Here's a simple example:

function getPercentage(value, max){
	return Math.round((value / max) * 100) + "%";
}

Here, from two values, we're going to create a third derived value, which will be the percentage in the form of a string.

But then what's the problem?

Unnecessary recalculations with React

Now let's add our function to calculate a derived value (percentage) inside a very basic React component:

function MyComponent({ score, time }) {

	// Value is between 0 and 10
  function getPercentage(value){
		return Math.round((value / 10) * 100) + "%";
	}

  return (
	  <div>
		  <p>Time: {time}</p>
		  <p>Pourcentage: {getPercentage(score)}<p>
		</div>
	);
}

And let's imagine that the time property is updated every 100ms.

The way React's rendering works means that our component will be updated every 100ms, and so our getPercentage function will also be executed every 100ms, even if this function's value and max parameters haven't changed value.

As a result, the outcome of this derived value hasn't changed either, so this is an unnecessary recalculation, which lowers our render's performance.

What if it were possible to only recalculate our derived value when the values used in the calculation change?

Using the useMemo hook

useMemo is a powerful React hook, designed to optimize performance by memoizing the result of a function as long as its dependencies don't change.

When a component re-renders, React will check the specified dependencies and will only recalculate the value if one of them has changed.

Here's a basic example, reusing our previous function:

import { useMemo } from 'react';

function MyComponent({ score, time }) {

  const percentage = useMemo(() => {
	  return Math.round((score / 10) * 100) + "%";
  }, [score]);

  return (
	  <div>
		  <p>Time: {time}</p>
		  <p>Pourcentage: {percentage}<p>
		</div>
	);
}

Here, the percentage will only be recalculated if score changes.

Even though the component re-renders every 100ms, our derived value percentage won't be unnecessarily recalculated.

When should you use useMemo?

1. To avoid unnecessary calculations: If a calculation function is complex or depends on a large amount of data, useMemo can reduce its impact on performance.
2. In components with frequent re-renders: If a component often re-renders due to other props or states, useMemo can prevent superfluous recalculations.
3. To optimize costly operations: For example, filtering or sorting long lists, or intensive mathematical calculations.

Example with a costly operation:

function FilteredList({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.score - b.score;
  }, [items]);

  return <ul>{sortedItems .map(item => <li key={item}>{item}</li>)}</ul>;
}

When should you avoid useMemo?

It's important not to overuse useMemo.

If the operation to be optimized is lightweight or if the component doesn't re-render frequently, useMemo could add unnecessary complexity.

This hook itself has a cost in terms of memory management and dependency checking.

But if this component depends on other props or states that cause frequent re-renders, using useMemo can prevent unnecessary recalculations, as in our example.

Conclusion

useMemo is an essential tool for optimizing performance in React when working with derived values.

And it's also a great way to keep your template's code as clean as possible!

However, for simple calculations or lightly used components, it isn't always necessary to use it.