What is the useMemo hook?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
useMemo memoizes the result of a computation, recalculating it only when its dependencies change. Syntax: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);. On subsequent renders, if a and b have not changed, React returns the cached result without re-running the function. When to use: (1) Expensive calculations (complex array transformations, sorting large lists, heavy math). (2) Referential stability — when you need the same object/array reference across renders to prevent child re-renders or satisfy useEffect dependencies: const options = useMemo(() => ({ limit: 100, filter }), [filter]);. When NOT to use: For simple computations (adding two numbers, string formatting) — the overhead of useMemo exceeds the computation cost. Common mistake: using useMemo for everything (premature optimization). Only memoize when there is a measurable performance problem. React may also discard the memoized value in the future (e.g., for memory pressure) — do not rely on it for correctness, only for performance.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your React.js experience.