When two sibling components must show the same data, move shared state to their closest common parent and pass values down as props plus callbacks to update.
Why lift state?
- Avoid duplicating state that can drift out of sync
- Keep a single source of truth for filters, selection, or theme
- Enable parent to coordinate multiple children (master/detail layouts)
Data flow reminder
State flows down via props; events flow up via functions like onSelect(id). This one-way flow makes debugging tractable.
Self-check
- Which component should own shared filter state—a list, a search box, or their parent?
- How does a child request a state change after lifting?
Tip: Lift only as high as needed—if only one branch needs the value, keep state in that branch.
Interview prep
- When do you lift state?
Move shared state to the closest common ancestor when two siblings need the same value. Colocate first; lift only when a second consumer appears.