What colocation means
State colocation is the practice of keeping a piece of state in the lowest component that needs it. State placed too high re renders a large subtree on every change, while colocated state re renders only the small part that cares.
- A change re renders the owning component and its children
- Lifting state up widens that render scope
- Push state down until only the relevant subtree updates
Lift only when shared
You lift state up only when multiple siblings must share it. Until then, local state keeps renders narrow and components self contained.
- Start with state local, lift it only on real demand
- A volatile value like an input draft belongs next to the input
- Over lifting causes form keystrokes to re render the whole page
Colocation vs lifting
Key idea
Keep state in the lowest component that uses it so a change re renders the smallest subtree, and lift it up only when separate siblings genuinely need to share it.