What does lifting state up mean in React?
When two sibling components need the same data, you move the state to their closest common parent and pass it down as props, along with callbacks to change it. This keeps one source of truth.
Explain it simply
Suppose two friends keep separate copies of the cricket match score and they drift apart. The fix is one shared scoreboard that both read. In React, that shared board is the state in a common parent.
Siblings cannot talk to each other directly. So the parent holds the value, gives it to both as props, and gives them a function to ask for changes.
Example
function Converter() {
const [rupees, setRupees] = useState(100);
return (
<>
<Input label="INR" value={rupees} onChange={setRupees} />
<Display usd={(rupees / 83).toFixed(2)} />
</>
);
}Both children now agree because there is exactly one rupees value.
What to say in the interview
"Lifting state up means moving shared state to the nearest common ancestor and passing values and setters down as props. It avoids two copies of the same data getting out of sync. If the tree gets deep, I consider context or a store, but I start with plain lifting."
Common mistakes
- Copying a prop into local state, which creates two sources of truth.
- Lifting state higher than needed, causing wide re-renders.