useMemo: Cache Expensive Calculations in React

Why it exists

By default, React re-runs all code inside a component on every render. If your component performs a slow calculation, like filtering a massive list, this can make your UI feel sluggish. useMemo was created to solve this by letting you skip these expensive recalculations when they are not necessary.

The mental model

useMemo is a performance optimization tool, not a semantic guarantee. Think of it as telling React, "Don't re-run this expensive function unless one of these specific values has changed." It memoizes, or remembers, the result of the function call. If the dependencies are the same as the last render, React gives you the old result back instantly.

How it works

You wrap your expensive calculation in a function and pass it to useMemo along with a dependency array. On the initial render, React calls your function, stores its return value, and returns it. On subsequent renders, React checks if any value in the dependency array has changed (using Object.is comparison). If nothing has changed, it returns the stored value. If a dependency has changed, it re-runs your function, stores the new result, and returns that.

When to use it

The primary use case is for computationally expensive operations. Use it when filtering or transforming large arrays or performing complex calculations that you've measured and confirmed are a performance bottleneck. It's also useful for preserving the reference of an object or array that's passed as a prop to a component wrapped in React.memo, preventing that child from re-rendering unnecessarily.

When not to use it

Don't wrap every function in useMemo. It has its own overhead; on every render, React must allocate memory for the dependencies and compare them. For simple, fast calculations, the cost of useMemo can be greater than the cost of just re-running the calculation. Use it as a targeted optimization, not a default practice.

One canonical example

Imagine a TodoList component that receives a large todos array and a tab prop ('all', 'active'). Filtering the todos based on the tab could be slow. You would write: const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);. Here, the filterTodos function only re-runs if the todos array changes or if the user switches to a different tab. If the component re-renders for another reason, visibleTodos is retrieved from the cache instantly.