What is the useMemo Hook in React?
Learn what React's useMemo Hook does, how memoization and dependency arrays work, when to use it, common mistakes and interview-ready code examples.
Expected Interview Answer
useMemo is a React Hook that memoizes the result of an expensive calculation, recomputing it only when one of its dependencies changes instead of on every render.
It takes a function and a dependency array: useMemo(() => compute(a, b), [a, b]). On each render React compares the dependencies; if they are unchanged it returns the cached value from the previous render, otherwise it runs the function again and caches the new result. This avoids repeating costly work like filtering large lists or heavy math, and it keeps referential identity stable so memoized children and other hooks don't re-run needlessly.
- Skips expensive recalculations between renders
- Preserves a stable reference for objects and arrays
- Prevents unnecessary re-renders of memoized children
- Keeps derived data in sync with its inputs
- Improves perceived performance on heavy UIs
AI Mentor Explanation
Think of a scorer who calculates a batter's strike rate. If nothing has changed since the last ball, recomputing it from scratch every delivery is wasteful. A smart scorer caches the figure and only recalculates when a new run or ball is added. useMemo works the same way: it stores the computed value and redoes the math only when the underlying scoring inputs actually change.
Step-by-Step Explanation
Step 1
Identify the expensive value
Find a calculation, filtered list, or derived object that is costly or must keep a stable reference.
Step 2
Wrap it in useMemo
Return the value from a function passed to useMemo: const result = useMemo(() => compute(a, b), [a, b]).
Step 3
List every dependency
Include all reactive values the calculation reads so the cache updates when — and only when — they change.
Step 4
Consume the memoized value
Use the returned value in render or pass it to memoized children that rely on referential stability.
Step 5
Measure before and after
Profile to confirm the memoization actually reduces work; remove it if the gain is negligible.
What Interviewer Expects
- Clear definition of memoization and caching
- Correct useMemo signature and dependency array usage
- Understanding of referential identity and re-renders
- Awareness that it is an optimization, not a semantic guarantee
- Knowing when NOT to use it
Common Mistakes
- Wrapping every value in useMemo without measuring
- Omitting or falsifying dependencies, causing stale values
- Confusing useMemo (caches a value) with useCallback (caches a function)
- Relying on the cache for correctness rather than performance
- Doing side effects inside the memo function
Best Answer (HR Friendly)
“useMemo is a React tool that remembers the result of a slow calculation so the app doesn't redo the same work every time the screen updates. It only recalculates when the information it depends on actually changes, which keeps the interface fast.”
Code Example
import { useMemo, useState } from 'react'
function ProductList({ products }) {
const [query, setQuery] = useState('')
// Recomputes only when products or query change
const visible = useMemo(() => {
return products.filter((p) =>
p.name.toLowerCase().includes(query.toLowerCase())
)
}, [products, query])
return (
<>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
<ul>
{visible.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</ul>
</>
)
}Follow-up Questions
- How does useMemo differ from useCallback?
- What happens if you leave the dependency array empty?
- Can useMemo be relied on to never recompute a value?
- How does React.memo interact with values from useMemo?
- When is adding useMemo actually counterproductive?
MCQ Practice
1. What does useMemo return?
useMemo caches and returns the value produced by its function, recomputing only when dependencies change.
2. When does the function passed to useMemo re-run?
React re-invokes the memo function only when one of the values in the dependency array changes.
3. Which is a valid reason to use useMemo?
useMemo preserves referential identity, preventing memoized children from re-rendering unnecessarily.
Flash Cards
What does useMemo memoize? — The return value of a calculation, recomputed only when its dependencies change.
useMemo signature? — useMemo(() => computeValue(), [dep1, dep2]).
useMemo vs useCallback? — useMemo caches a computed value; useCallback caches a function reference.
Is useMemo a correctness guarantee? — No. React may discard the cache; treat it purely as a performance optimization.