Skip to content
React·Intermediate·Coding·1 min read

What does React.memo guarantee?

Short interview answer

It can skip rendering when props are shallowly equal, but it is a performance optimization, not a semantic guarantee. Internal state and consumed context can still trigger rendering, and unstable object or function props defeat shallow equality.

Example

JSX
const Row = React.memo(function Row({ row }) { /* ... */ });
// Defeats memo — new object identity every parent render:<Row row={{ ...row }} onSelect={() => select(row.id)} />
// Helps memo — stable references:<Row row={row} onSelect={onSelect} />

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to React reconciliation

Related questions