FrontendHaltReact·Intermediate·Coding·1 min read
Why can a memoized child still re-render on every parent render?
Short interview answer
React.memo does a shallow comparison of props. An inline object, array, or arrow function created fresh in the parent's render body is a new reference every time, so the shallow comparison always reports a change even though the logical value is the same.
Example
const Child = React.memo(Row);// New `style` and `onClick` identities each render -> memo never hits:<Child style={{ margin: 8 }} onClick={() => pick(id)} />Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.