state colocation
Keep state near the components that own its lifecycle.
Use this when Local temporary state is unnecessarily shared across independent panels.
without the term
“Opening an accordion in one panel opens it in the other panel too, because the open state is in the global store. Can you keep that kind of state local to each panel?”
with the term · How do you ask a model for state colocation?
Colocate this temporary selection with its panel. Verify two panels remain independent and move ownership only where shared behavior requires it.
What is state colocation?
State lives in the lowest component that uses it, and moves up only when another component needs it too.
Why does state colocation matter when vibe coding?
A global store can couple interactions that should remain independent.
How do you do state colocation?
Identify readers, writers, and lifetime before choosing the state owner.
What goes wrong with state colocation?
Duplicating a genuinely shared value and trying to synchronize the copies.