When useMemo and useCallback Actually Hurt React Performance

When useMemo and useCallback Actually Hurt React Performance

useMemo and useCallback are usually discussed as performance tools, but they can hurt performance when misused. Here is when and why.

Memoization Is Not Free

Each call to useMemo or useCallback has its own overhead: storing the dependencies, comparing them on every render, and managing the cache. For cheap computations, this overhead exceeds the saving.

Most Values Are Cheap to Recompute

A simple addition, a small object, or a function used only in the same component costs almost nothing to recreate. Wrapping these in useMemo or useCallback is net negative.

Used Without React.memo

useCallback only helps if the child receiving the function is wrapped in React.memo. If the child is not memoized, it re-renders anyway, so the stable reference provides no benefit and the overhead is wasted.

Used With Wrong Dependencies

Missing dependencies cause stale values; too many dependencies cause recomputation on every render. Wrong dependency arrays undo the memoization, and you have overhead without the benefit.

Complex Code for No Gain

Wrapping everything makes the code harder to read for no measurable benefit. The complexity tax is real, and it makes the code harder to maintain.

The Right Approach

Measure with the Profiler. Find a component that is genuinely slow or re-rendering unnecessarily. Then use the right hook only there. The default should be no memoization, with memoization added only where measured.

The Takeaway

useMemo and useCallback hurt performance when used for cheap computations, without React.memo, with wrong dependencies, or as a default. Measure first, find the real bottleneck, and memoize only there.