React useMemo

`useMemo` caches the result of a calculation between renders and recomputes it when its dependency list changes. It is primarily a performance optimization, not a correctness mechanism.

`useMemo` accepts a calculation function and a dependency array: `useMemo(() => calculateValue(), [dep1, dep2])`. React returns the cached result from the previous render when the dependencies are unchanged, and otherwise runs the calculation again.

The calculation runs during rendering, so it should be pure and should not perform side effects. Dependencies should include every reactive value used by the calculation; when any dependency changes according to React's dependency comparison, the cached value is invalidated.

A common use is avoiding an expensive derived computation when unrelated state changes. It can also provide stable object or array references when referential equality matters, such as when passing derived data to a memoized child component.

`useMemo` does not guarantee that a value will remain cached forever. React may discard memoized values in situations allowed by its implementation, so code should remain correct if the calculation runs again. Use it when recomputation has a meaningful performance cost or stable identity provides a concrete benefit, rather than wrapping every calculation automatically.

Key points

• `useMemo` caches a calculated value between renders.
• Dependencies determine when React recomputes the value.
• The calculation should be pure and free of render-time side effects.
• It can reduce expensive recomputation and preserve object or array identity.
• It is a performance optimization, not a semantic guarantee.

Interview questions

What problem does `useMemo` solve?

`useMemo` can avoid repeating an expensive calculation when its inputs have not changed. It stores the previous result and returns it again when the dependency values are unchanged. This can make repeated renders cheaper. It should not be added automatically to every calculation because caching also has overhead and complexity.

How does the dependency array affect `useMemo`?

React compares the listed dependencies between renders. If they have not changed according to React's dependency comparison, React can reuse the previous memoized result. If at least one dependency changes, React runs the calculation again. Every reactive value referenced by the calculation should normally be included in the dependency list.

When would `useMemo` improve performance in a real application?

It is useful when a calculation is sufficiently expensive and occurs during renders that do not change its inputs. Examples include filtering or sorting a large dataset or computing a costly derived structure. It can also help preserve the identity of an object or array passed to a component that relies on referential equality. The decision should be based on a measurable or plausible rendering bottleneck rather than habit.

Why should you not put side effects inside a `useMemo` calculation?

The function supplied to `useMemo` is part of rendering and should behave like a pure calculation. Rendering may be performed or repeated in ways that make side effects there unsafe or surprising. Effects such as subscriptions, network synchronization, or imperative DOM work belong in the appropriate effect or event-handling mechanism. Keeping the calculation pure also makes its cached-result semantics easier to reason about.

Can you rely on `useMemo` for correctness?

No. `useMemo` is intended as a performance optimization, so component behavior should remain correct even if React recalculates the value. It should not be used as a substitute for state, synchronization, or other semantic guarantees. If correctness depends on preserving a value across renders, the appropriate state or ref mechanism should be considered instead. Memoization should optimize an already-correct design.