What is React.memo and when does it actually help?
Quick answer
React.memo skips re-rendering a component when its props are shallowly equal to last time. It helps for expensive components re-rendered often with unchanged props.
In detail
By default a child re-renders whenever its parent does. React.memo wraps a component to bail out when props haven't changed (shallow compare). It only helps if the component is genuinely costly and its props are referentially stable — otherwise the comparison cost outweighs the benefit, or new inline props defeat it entirely.
const Row = React.memo(function Row({ item, onSelect }) {
return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});⚠️Needs stable props
Inline objects/functions create new references each render and defeat memo. Pair with useMemo/useCallback.
Why interviewers ask this: Core performance tool — and a trap if misunderstood.
Common follow-up questions
- →Why might a memoized component still re-render?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399