When is useMemo actually worth using?
Use it when a calculation is measurably slow, or when you need a stable object or array reference to pass to a memoised child or a hook dependency. Wrapping cheap calculations adds overhead and noise.
Explain it simply
useMemo is a notebook where React writes down the answer to a sum so it does not redo the sum when you ask again with the same numbers. That helps for a long calculation. For a + b, opening the notebook costs more than doing the sum.
Two good reasons to use it. One: filtering or sorting thousands of rows on every keystroke, where the work is really slow. Two: you need the same object reference across renders, for example an options object passed to a React.memo child or listed in an effect's dependencies.
Measure first. Profile in React DevTools, and if the render is not slow, leave the code simple. Also remember that React may discard cached values, so useMemo is a performance hint and your code must still be correct without it.
Example
function Results({ students, query }) {
const shown = useMemo(
() => students.filter(s => s.name.toLowerCase().includes(query)),
[students, query]
);
return <List items={shown} />;
}What to say in the interview
"useMemo caches a computed value between renders until its dependencies change. I use it for genuinely expensive work or to keep an object reference stable for memoised children and dependency arrays. I do not sprinkle it everywhere, because it has a cost and adds complexity. The code must work correctly even if the cache is dropped."
Common mistakes
- Memoising trivial calculations.
- Forgetting dependencies, which returns stale results.