A child wrapped in React.memo still re-renders. Why?
Quick answer
Its props aren't referentially stable — the parent passes a new inline object/function/array each render, so the shallow prop comparison always fails.
In detail
memo compares props by reference. Objects, arrays, and functions defined in the parent's body are recreated every render, so even if their contents are identical, memo sees a 'change' and re-renders. Stabilise them with useMemo (values) and useCallback (functions), or restructure to pass primitives.
// ❌ new function + object each render -> memo useless
<Row onSelect={() => pick(id)} style={{color:'red'}} />
// ✅ stable references
const onSelect = useCallback(pick, []);
const style = useMemo(() => ({ color: 'red' }), []);Why interviewers ask this: A classic 'why isn't my optimisation working' scenario.
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