React · Frontend system thinking
What does lifting state up mean?
Short answer
Lifting state up means moving shared state to the closest common ancestor and passing it down as props, so siblings share one source of truth.
If two components need to stay in sync, keeping separate copies of the state causes drift. Move the state to their parent, pass the value down, and pass callbacks up so children can request changes.
function Parent() {
const [value, setValue] = useState("");
return (
<>
<Input value={value} onChange={setValue} />
<Preview value={value} />
</>
);
}When to lift
- Two or more siblings need the same data
- A child needs to update data another child displays
- The state must survive a child unmounting
- The state represents something the parent coordinates
If the tree is deep and many components need the value, passing props through every level becomes prop drilling. Context or an external store can help, but lifting to the nearest common owner is still the first step.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1When should state be lifted?
- 2What is prop drilling?
- 3How does context relate to lifting state?
- 4Why not put all state in a global store?
Say it in the interview
Lifting state up means moving shared state to the closest common ancestor. The parent owns the value and passes it down, along with callbacks for changes. That gives siblings one source of truth. I lift only as high as needed; if the tree is deep, context or a store can reduce prop drilling, but global state for everything makes the app harder to reason about.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.