The shared source problem
When two sibling components need the same data, neither should own it alone. Lifting state up means moving that state to their nearest common ancestor, which then passes the value down as props and passes handlers down to update it. One owner keeps the siblings consistent.
- Identify the lowest ancestor both siblings share.
- Hold the shared state in that ancestor.
- Pass the value down and pass updaters down too.
Single source of truth
With state lifted, there is one authoritative copy. A child never duplicates the value in its own state; it reads the prop and calls the handler to request changes. This avoids the classic bug where two copies drift apart.
- Children read the value through props, not local copies.
- Children request changes through passed handlers.
- The ancestor rerenders both siblings on each update.
Lift only as high as needed; lifting too far causes unnecessary rerenders and prop drilling.
Key idea
Lifting state up moves shared data to a common ancestor that passes values and updaters down, giving siblings one consistent source of truth.