useMemo in React Explained: What It Does and When to Use It

useMemo in React Explained: What It Does and When to Use It

useMemo memoizes a value so it is not recomputed on every render. Here is what it does, how it works, and when to actually use it.

What useMemo Does

useMemo takes a function and a dependency array, and returns the cached result. On subsequent renders, if the dependencies have not changed, it returns the cached value instead of recomputing.

When to Use It

Use useMemo when a computation is expensive and would otherwise run on every render. Sorting a large list, computing a complex derived value, or running heavy calculations are real use cases.

When Not to Use It

Do not use useMemo for cheap computations. Memoization itself costs something, so memoizing a simple addition adds overhead without benefit.

The Dependency Array

The array controls when the value recomputes. Include every value used in the computation that can change. If you miss one, the memoized value goes stale; if you include too much, it recomputes unnecessarily.

For Stable References

useMemo is also used to keep an object or array reference stable across renders, so children wrapped in React.memo do not re-render unnecessarily. This is a real but secondary use case.

The Common Mistake

Wrapping everything in useMemo without measuring. This adds complexity and overhead, since memoization is not free. Measure first, then memoize only the real bottlenecks.

The Takeaway

useMemo memoizes a computed value so it only recomputes when dependencies change. Use it for expensive computations or to keep object references stable, but only when there is a measured reason, since memoization is not free.