Introduction
Lifting state up is the pattern of moving state from a child component to its closest common ancestor when multiple components need to share and stay in sync with the same data. Because React's data flow is one-way (props down, events up), sibling components cannot directly communicate; the parent must own the shared state and pass it down as props, along with callback functions the children use to request updates.
Cricket analogy: Lifting state up when siblings can't directly communicate is like two fielders needing to coordinate a run-out relay, so the captain (parent) holds the game plan and relays instructions down to each, since fielders can't independently rewrite the plan.
Syntax
function Parent() {
const [value, setValue] = useState('');
return (
<>
<Input value={value} onChange={setValue} />
<Display value={value} />
</>
);
}
function Input({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}
function Display({ value }) {
return <p>You typed: {value}</p>;
}Explanation
Here, Input and Display are siblings that both need access to the same value. Instead of each managing its own local state, Parent owns the single source of truth (value) and passes it down to both children. Input also receives an onChange callback so it can request a state update, which flows back up to Parent and re-renders both siblings with the new value — demonstrating props down, events up in action.
Cricket analogy: Input and Display as siblings sharing one source of truth in Parent is like the striker and non-striker both needing the same run count, held by the umpire (parent) who updates it and relays back to both batters via the scoreboard.
Example
function TemperatureConverter() {
const [celsius, setCelsius] = useState(0);
const fahrenheit = (celsius * 9) / 5 + 32;
return (
<div>
<CelsiusInput value={celsius} onChange={setCelsius} />
<p>Fahrenheit: {fahrenheit.toFixed(1)}</p>
</div>
);
}
function CelsiusInput({ value, onChange }) {
return (
<input
type="number"
value={value}
onChange={(e) => onChange(Number(e.target.value))}
/>
);
}Output
Typing a Celsius value into the input calls onChange, which invokes setCelsius in the parent. This updates celsius state, causing TemperatureConverter to re-render and recompute fahrenheit — instantly reflecting the converted value in the paragraph below, even though the conversion display is a sibling of the input, not a parent or child of it.
Cricket analogy: Typing a Celsius value causing the Fahrenheit display to update instantly, even though it's a sibling not a parent, is like a run-rate calculator on the scoreboard updating the moment the over count changes elsewhere on the same board.
Key Takeaways
- Lifting state up means moving shared state to the closest common ancestor of the components that need it.
- The ancestor passes the state down as props and provides callback props for children to request changes.
- This keeps a single source of truth, preventing sibling components from getting out of sync.
- It is a direct consequence of React's one-way data flow: siblings can't talk to each other directly.
- Overusing lifting for deeply nested trees can lead to prop drilling; Context may be preferable at scale.
Practice what you learned
1. Why would you lift state up in a React application?
2. In the TemperatureConverter example, where does the celsius state live?
3. How does a child request a state update after state has been lifted to the parent?
4. What React principle makes lifting state up necessary for sibling communication?
5. What risk arises if you lift state too far up an unnecessarily deep component tree?
Was this page helpful?
You May Also Like
State in React
Understand how state gives components memory, enabling dynamic, interactive UIs that update over time.
Props in React
Learn how props pass read-only data from parent to child components in React's one-way data flow model.
Prop Drilling in React
Explore the problem of passing props through many intermediate components and the patterns used to avoid it.
Controlled vs Uncontrolled Components
Compare controlled components, where React state drives form values, with uncontrolled components that rely on the DOM and refs.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics