When can overusing useMemo hurt performance and what are the trade-offs?

WHAT THIS TESTS: This question probes whether you understand that useMemo is not a zero-cost abstraction. Every call stores a cached value and an array of dependencies, then runs an Object.is comparison on every render before deciding whether to recompute. At senior level, interviewers want to see you treat memoization as a deliberate trade-off rather than a default habit, and that you know the difference between value memoization and render prevention.

A GOOD ANSWER COVERS: First, the runtime overhead. React must allocate an array, store the previous result, and iterate dependencies for comparison on each render. For cheap calculations like string concatenation or simple arithmetic, this comparison cost can exceed the cost of recomputing. Second, memory overhead. Cached values and their dependency arrays live for the lifetime of the component, which matters in long-lived lists or data-heavy dashboards. Third, complexity cost. Dependency arrays add maintenance burden and stale-closure risk; incorrect deps silently break caching or cause bugs. Fourth, the distinction between useMemo and React.memo. useMemo preserves a value reference, but a child component only skips rendering if it is wrapped in React.memo and receives that stable reference as a prop. Without React.memo, the stable reference alone does nothing to prevent child renders.

COMMON WRONG ANSWERS: Saying useMemo is free or that it automatically prevents re-renders of children. Using useMemo on primitives like numbers or booleans where referential equality does not help. Wrapping every object or callback in useMemo without profiling first. Claiming that useMemo guarantees the calculation runs only once per dependency change, ignoring Strict Mode double-invocation during development.

LIKELY FOLLOW-UPS: How would you profile whether useMemo is actually helping? When is it better to lift state or split components instead of adding useMemo? How does React Compiler change the manual useMemo trade-off? What is the difference between useMemo and useCallback in terms of what they cache?

ONE CONCRETE EXAMPLE: Imagine a table with one thousand rows where each cell computes a formatted currency string via useMemo. The formatting is a single Intl.NumberFormat call that takes less than 0.05 milliseconds. The hook adds an array allocation and dependency checks for every cell on every render. In aggregate, that overhead exceeds the formatting cost, and the component uses several megabytes to retain cached strings that are rarely reused because filters change frequently. The better fix is either computing inline or virtualizing the table, not blanket memoization.

Source: react.dev