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

What determines how many components re-render when state changes?

Short interview answer

State changing in a component triggers a re-render of that component and, by default, everything it returns in its render output. Where state lives in the tree — not the presence of memoization APIs — is the primary driver of how much work a change causes.

Example

JSX
// Search text at the top re-renders the whole page on every keystroke.// Move it down so only <SearchBox> and its results re-render:function Page() { return <><Header/><SearchBox/><Sidebar/></>; }

Key takeaway

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

← Back to React performance optimization

Related questions