State Colocation in React: Keep State Close to Where It's Used

Where should state live in a component tree? The instinct is often "as high as possible, just in case." That instinct is usually wrong.

What state colocation means

Keep state as close as possible to the component that actually uses it. Lift it only when multiple parts of the tree genuinely need to share it.

That gives you:

• Fewer unnecessary re-renders — an update only touches the subtree that owns the state.
• Less coupling between components that have nothing to do with each other.
• State ownership that is easy to reason about.

Why it's an optimal pattern

For large and complex frontend applications, storing everything in a global store leads to massive issues. State colocation fixes this.

On every update, React builds a new Virtual DOM tree and diffs it against the old one — reconciliation. To decide if an element changed, moved, or was deleted, React checks two things: its element type and its key. If both match across renders, it updates the existing node instead of recreating it.

State declared high in the tree forces reconciliation to touch far more of it than the change actually requires. Colocated state keeps the diff small and the update local — exactly what reconciliation is optimized for.

Surgical re-renders, no global pollution

When state changes, the component that owns it — and everything below it — re-renders. Nothing else. That single fact explains most render-performance surprises.

Take a search input. Drop its value into a global store, and every keystroke can make your app shell, nav bar, and sidebar all re-evaluate — just so a letter can land in a text box they don't even render.

Keep that same value inside <SearchBar /> instead, and the re-render never leaves that component. No React.memo tuning required — you simply never gave the rest of the app a reason to care.

The rule of thumb

Locate state where it's used. Lift it up only when strictly necessary.

local state first → lift when needed → globalize only when truly shared

Where do you draw the line for "strictly necessary" in your own codebase?