What is useMemo in React?
Learn what useMemo does in React, how it caches expensive computations between renders, when it actually helps performance, and common mistakes to avoid.
Expected Interview Answer
useMemo is a React hook that caches the result of an expensive calculation between renders, recomputing it only when one of its listed dependencies changes, rather than on every render.
You call useMemo with a function that returns a computed value and a dependency array; React runs that function during render and stores the result, reusing the cached value on subsequent renders as long as the dependencies stay the same. This is most useful for genuinely expensive computations, like filtering or sorting a large array, or for producing a stable object or array reference that would otherwise be recreated every render and break memoized children or effect dependencies. useMemo does not prevent the component itself from re-rendering; it only avoids recomputing a specific value inside that render. Overusing useMemo for cheap calculations adds unnecessary complexity and memory overhead without a meaningful performance benefit, so it should be applied deliberately after identifying an actual bottleneck.
- Avoids recomputing expensive values on every render
- Produces stable references for objects/arrays passed as props
- Pairs well with React.memo to prevent unnecessary child re-renders
- Controlled by an explicit dependency array
- Targets measured performance bottlenecks, not blanket optimization
AI Mentor Explanation
useMemo is like a scorer who calculates a batter's full career average once and writes it on a card, only recalculating when a new innings is actually added to the record. Between matches, anyone asking for the average just reads the cached card instead of the scorer re-adding every innings from scratch each time.
Step-by-Step Explanation
Step 1
Identify an expensive computation
Find a calculation, like sorting or filtering a large array, that's costly to repeat every render.
Step 2
Import useMemo
Import useMemo from 'react' in the component file.
Step 3
Wrap the computation
Call useMemo(() => computeValue(), [dependencies]) to memoize the result.
Step 4
List accurate dependencies
Include every value the computation reads so it recomputes correctly when they change.
Step 5
Use the cached value
Reference the returned value in JSX or pass it to a memoized child component.
What Interviewer Expects
- Explains useMemo caches a computed value across renders
- Knows it recomputes only when dependencies change
- Clarifies it does not prevent the component's own re-render
- Mentions typical use cases: expensive calculations, stable references
- Warns against overusing it for trivial computations
Common Mistakes
- Wrapping cheap calculations in useMemo unnecessarily
- Forgetting dependencies, causing stale memoized values
- Believing useMemo prevents the component from re-rendering at all
- Using useMemo where useCallback (for functions) is actually needed
- Treating memoization as a guaranteed performance win without profiling first
Best Answer (HR Friendly)
“useMemo helps a component avoid redoing a slow calculation every single time it updates, by remembering the last result and only recalculating when the relevant data actually changes. This keeps the app feeling fast, especially with large lists or complex computations.”
Code Example
import { useMemo, useState } from 'react';
function ProductList({ products, query }) {
const [sortAsc, setSortAsc] = useState(true);
const filtered = useMemo(() => {
// Only recalculates when products or query change
return products
.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()))
.sort((a, b) => (sortAsc ? a.price - b.price : b.price - a.price));
}, [products, query, sortAsc]);
return (
<ul>
{filtered.map((p) => (
<li key={p.id}>{p.name} - ${p.price}</li>
))}
</ul>
);
}Follow-up Questions
- How is useMemo different from useCallback?
- Does useMemo guarantee the computation is never re-run?
- When would using useMemo actually hurt performance?
- How does useMemo interact with React.memo on child components?
- What happens if you omit a used variable from the dependency array?
MCQ Practice
1. What does useMemo primarily do?
useMemo caches the result of a computation, recalculating only when its dependencies change.
2. Does useMemo prevent the component from re-rendering?
useMemo does not stop the component from re-rendering; it just skips recomputing the specific memoized value.
3. When should useMemo generally be applied?
useMemo is best reserved for measurably expensive calculations; overusing it for cheap operations adds needless overhead.
Flash Cards
What does useMemo do? — It caches an expensive computed value, recalculating only when its dependencies change.
Does useMemo stop a component from re-rendering? — No, it only avoids recomputing the specific memoized value during that render.
When should you reach for useMemo? — For genuinely expensive computations or to produce stable references for memoized children.
What controls when useMemo recalculates? — The dependency array passed as its second argument.