React's useMemo Hook: Cache Expensive Calculations

Why it exists

React components re-render whenever their state or props change. By default, this means all code inside the component body runs again, including potentially slow calculations. useMemo was created to provide a performance escape hatch, allowing developers to skip these expensive re-calculations when they aren't necessary.

The mental model

Think of useMemo as a cache for a single value within your component. You give it a function that produces a value and a list of "ingredients" (dependencies) that go into that function. React will only re-run the function to get a new value if one of the ingredients has changed since the last render. Otherwise, it serves the cached value, saving computation time.

How it works

You call useMemo at the top level of your component, passing two arguments: a "create" function and a dependency array. On the first render, React executes the create function, stores its result, and returns it. On subsequent renders, React compares each item in the dependency array with its value from the previous render using Object.is comparison. If all dependencies are the same, React returns the stored result without calling the create function. If any dependency has changed, React re-runs the create function, stores the new result, and returns it.

When to use it

Use useMemo for computationally expensive operations that you don't want to run on every render. Three common scenarios are: first, filtering, sorting, or transforming a large array; second, wrapping a value (like an object or array) that you pass as a prop to a component wrapped in React.memo to prevent it from re-rendering unnecessarily; third, as a dependency for another hook like useEffect to control when the effect re-runs.

When not to use it

Avoid useMemo for cheap calculations. The overhead of checking dependencies can be more expensive than simply re-running the calculation itself. Also, don't use it if the calculation must run on every render. Remember that useMemo is a performance optimization, not a semantic guarantee; React may discard the cache for reasons like memory pressure. Premature optimization with useMemo can make code harder to read without providing any real benefit.

One canonical example

Imagine a TodoList component that receives a large todos array and a tab prop ('all', 'active', 'completed'). Filtering the list can be slow.

const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);

Here, filterTodos is the expensive calculation. It will only re-run if the todos array or the tab string changes. If the component re-renders for another reason, useMemo returns the previously calculated visibleTodos array, saving a costly re-filter.