Colocation keeps state as close as possible to where it is used—toggle open inside the dropdown, field draft inside the input. Lifting state moves shared state to the nearest common ancestor so siblings stay in sync.
When to colocate
- UI-only state no sibling needs (accordion open, hover)
- Encapsulated behavior you might reuse elsewhere
When to lift
- Two components must reflect the same value (filter + list)
- Parent orchestrates a workflow (wizard step index)
Lifting too early creates “prop drilling” and wide parent components. Colocating too late duplicates state and causes bugs when copies diverge.
Rule of thumb
Start colocated; lift only when a second consumer appears. If lifting crosses many layers, consider context or a small store—not immediate Redux for every app.
Self-check
- Should modal open state live in the page or inside
Modal? - Give an example where lifting is required.