Preserving and Resetting State

State is isolated between components and is tied to a position in the render tree: React associates each piece of state with a component by where that component sits in the tree, not by the JSX tag that produced it. React preserves a component's state for as long as the same component type is rendered at the same position; if it is removed, or a different component type takes its position, React discards the state of the whole subtree. This is why nesting component definitions is a bug — a new function is created on every render, so React sees a different component at the same position and resets all state below; always declare component functions at the top level. To reset state deliberately, either render components in different positions or give each one an explicit identity with a key: specifying a key tells React to use the key itself as part of the position instead of order within the parent, so two counters with keys Taylor and Sarah never share state. Keys are not globally unique; they only specify position within the parent, and resetting a form with a key is a particularly useful application. Scope: React rendering and reconciliation. Reviewed October 4, 2026.