CodeParkLifting state up means moving shared state out of child components and into their closest common parent. You do it when two siblings need to share the same data or stay in sync.
The parent owns the state. It passes the value down as props, along with a callback. Children call that callback to ask for a change.
This gives a single source of truth: one place holds the data. Without it, each child keeps its own copy, and the copies can drift apart. The children become controlled by the parent, because the parent decides their values.
A typical example is an accordion where only one panel can be open. Each panel cannot decide on its own. So the parent stores activeIndex, and each panel receives isActive and onShow.
Sometimes lifting forces you to pass props through many layers. That is when you consider context or composition.
- Move shared state to the closest common parent.
- Pass the value and a change handler down as props.
- One source of truth avoids duplicated state that gets out of sync.
- The children become controlled components.
- Passing props through many layers is the signal to consider context or composition.