Two sibling components need the same data. Where should the state live? What are 'lifting state up' and 'colocation'?
Reasoning about state ownership — a single source of truth and choosing where it belongs.
When two components need the same state, move it UP to their closest common parent and pass it down as props (the value) plus a callback (to change it). That is 'lifting state up': the parent becomes the single source of truth and the children become controlled — they render the value and report intent via callbacks instead of each keeping a private copy. Keeping a duplicate copy in both siblings is exactly the bug this prevents; the two copies drift out of sync. The complementary principle is COLOCATION: keep each piece of state as low, as close to where it is used, as possible, and lift only when sharing forces you to. Over-lifting (hoisting everything into a top-level component) makes every keystroke re-render the whole tree and couples unrelated parts; under-lifting (duplicating) causes sync bugs. The rule of thumb: colocate by default, lift on demand to the nearest common ancestor and no higher. A telltale sign you have lifted too far is a prop threaded through many layers that do not use it ('prop drilling') — the cue to either colocate lower, compose by passing children through, or reach for Context when the state is genuinely cross-cutting/global. And derived data should not be state at all: compute it during render from the source of truth rather than storing a second, drift-prone copy.
Deciding where state lives; fixing out-of-sync sibling copies; knowing when to lift vs colocate vs reach for Context.