FrontendHaltReact·Intermediate·Coding·1 min read
How does React decide whether component state is preserved?
Short interview answer
State is associated with a component's position and identity in the render tree. If the element type and key at a position remain compatible, React preserves state. Changing the type or key tells React that it is a different identity and resets that subtree.
Example
{show ? <Panel /> : <Panel />} // same type + position -> state kept{show ? <PanelA /> : <PanelB />} // different type -> unmount + remount<Panel key={userId} /> // key change -> state reset on purposeKey takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.