Lesson 8 of 80

Memoization

Q: A component is wrapped in React.memo but still re-renders every time its parent renders. What's the most likely cause, and how would you actually confirm it?

A strong answer covers: React.memo compares props shallowly, by reference — not deep equality; A common cause: the parent passes an inline function or object literal as a prop, creating a new reference every render; Fix: useCallback (for functions) or useMemo (for objects/values) to keep a stable reference across renders when dependencies haven't changed.

React.memo, useMemo, and useCallback all skip work by comparing references — which means a fresh reference every render silently defeats all three.

15 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 4

What's the correct fix for the React.memo problem above?

Wrap the handler in useMemo instead of useCallbackWrap the handler in useCallback with the right dependenciesRemove React.memo from Child, since it isn't helping anyway

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Memoization

What interviewers actually ask about this, and what a strong answer has to cover.

A component is wrapped in React.memo but still re-renders every time its parent renders. What's the most likely cause, and how would you actually confirm it?

A strong answer covers

React.memo compares props shallowly, by reference — not deep equality
A common cause: the parent passes an inline function or object literal as a prop, creating a new reference every render
Fix: useCallback (for functions) or useMemo (for objects/values) to keep a stable reference across renders when dependencies haven't changed

Likely follow-ups

Why might wrapping a cheap computation in useMemo actually make things slightly worse, not better?
If you forget a dependency in useCallback's dependency array, what specific bug does that reintroduce from an earlier lesson?
Does memoizing a component with React.memo also memoize the props you pass it? Why or why not?
If you wrote a plain vanilla-JS memoize() wrapper around a function with no React involved, what would you need to store and compare yourself that useMemo handles for you?

Practice these with the AI interviewer →

The plain-language idea

Three tools, one idea: skip work if nothing actually changed.

React.memo(Component) skips re-rendering a component if its props are shallowly equal to last time.
useMemo(fn, deps) skips recomputing a value if deps haven't changed.
useCallback(fn, deps) skips creating a new function if deps haven't changed.

All three compare by reference, not by deep equality. That single fact is where almost every memoization bug comes from.

See it in a real thing: the trap that defeats React.memo

const Child = React.memo(function Child({ onClick }) {
  /* ... */
});

function Parent() {
  const handleClick = () => doThing(); // ❌ new function every render
  return <Child onClick={handleClick} />;
}

Child is memoized, but Parent hands it a brand-new function every single render. React.memo's shallow comparison sees a different onClick reference every time — as far as it can tell, the prop changed — so Child re-renders anyway. The memoization did nothing.

React.memo + a new function every renderStep 1 of 4

Parent re-renders. Without useCallback, handleClick is a brand-new function reference every single time.

What people usually miss

Watch out

Memoizing something that's cheap to compute can make things slower, not faster. useMemo/useCallback have their own small overhead (storing and comparing the dependency array) — reach for them when the computation is genuinely expensive or the reference stability itself is what matters (like feeding React.memo), not everywhere by default.
The dependency array has to be honest. Leaving out a value the function actually uses reintroduces the exact stale-closure bug from the useState lesson — useMemo/useCallback don't protect you from that; they're built on the same closure mechanics.
React.memo's default comparison is shallow, same as Object.is on each prop. Passing an object or array prop still needs that object to keep the same reference across renders — memoizing the component doesn't memoize its props for you.
useMemo is not a lifecycle guarantee. React is allowed to discard a memoized value and recompute it later (e.g. to free memory) — don't rely on useMemo for anything with side effects; that's what useEffect is for.

Why this matters in interviews

"Why doesn't React.memo prevent this re-render?" is a favorite because the bug looks like it shouldn't exist — the component is memoized — and explaining it requires connecting three ideas from earlier lessons at once: reference equality (from props), closures (from useState), and reconciliation's shallow comparison.