Statebeginner
State Colocation
Learn the principle of keeping state as close as possible to where it's used, lifting it only when truly necessary.
State colocation means placing state in the component that actually needs it, rather than defaulting to lifting everything up to a top-level component or a global store 'just in case' something else might need it later. Colocated state is easier to understand, test, and reason about because its scope of influence is small and visible in one place.
State colocation is like keeping a specific tool in the room where it's actually used instead of storing every tool in a central warehouse and walking there each time — you save the extra trip (unnecessary re-renders and indirection) for tools nobody else needs to borrow.
Key Concepts
1
A common anti-pattern, especially among developers newer to React or coming from other frameworks with heavier global-state defaults, is lifting state to the nearest common ancestor (or even to Redux) prematurely, before any actual sibling component needs to share it. This adds unnecessary re-render surface area and indirection for state that could have stayed local.
2
The right process is usually the reverse of the instinct to centralize: start with state as local as possible, and only lift it up (or move it into Context/a global store) at the exact moment a genuine sharing need arises between components that don't have a close common ancestor, or when prop drilling becomes deep and awkward.
3
Interviewers use this topic to gauge architectural judgment — a strong candidate recognizes that 'where should this state live?' doesn't have a single default answer, and can walk through the reasoning of moving state down (colocating) when a refactor reveals it's only used by one subtree, improving both performance and readability.