Lifting State Up
Lifting state up means moving shared state out of a child and into the closest common parent , so several components stay in sync from a single source of truth. The parent passes the value down as props and a setter down as a callback. Data flows down; events flow up. By the end you'll know how to make two components share and coordinate one piece of state.
Learn Lifting State Up in our free React course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick recall.
Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
1️⃣ One Source of Truth
When two components must show the same data, don't give each its own copy — they'll drift out of sync. Instead, store the value once in their nearest common parent and pass it down. That single copy is the source of truth . A classic example: a temperature shown in both Celsius and Fahrenheit.
The demo models that one parent value feeding two displays — change it once, both update:
2️⃣ Data Down, Events Up
The parent owns the state, so how does a child change it? The parent passes a callback down as a prop. The child calls that callback to request a change; the parent runs it and updates its own state. The mantra: data flows down, events flow up .
Your turn — call the handler the parent passed in so the parent's state actually updates:
3️⃣ A Shared Filter Across Siblings
A super common case: a search box and a results list are siblings . They can't talk directly, so the query lives in their parent. The search box reports typing up; the list reads the same query down. One state, two synchronized children.
The demo models that shared query driving a filtered list:
These lines lift state into a parent and share it with two children. Put them in a correct order:
1) Two sibling components need the same value. Where should the state live?
In their nearest common parent. The parent owns it and passes it down to both — one source of truth.
2) How does a child update state it doesn't own?
By calling a callback the parent passed down as a prop. Data flows down; events flow up.
3) When should you lift state vs. use Context?
Lift to the nearest common parent when only a few nearby components share data. Reach for Context only when many distant components need it.
📋 Quick Reference
A parent owns a list of prices. One child adds a price (events up); another shows the total (data down). Wire the add handler and compute the total from the single source of truth.
Practice quiz
What does 'lifting state up' mean?
- Moving state into a global store
- Deleting state from a component
- Moving shared state from a child to the closest common parent
- Renaming a state variable
Answer: Moving shared state from a child to the closest common parent. You lift state to the nearest common parent so multiple children can share one source of truth.
Why can't two sibling components share state directly?
- React data flows one way — down, parent to child — so siblings have no direct channel
- React forbids state in siblings
- Siblings cannot use useState
- They share state automatically
Answer: React data flows one way — down, parent to child — so siblings have no direct channel. Data flows down from parent to child; siblings coordinate through a shared parent that holds the state.
After lifting state, where does the value live?
- In each child independently
- In a separate config file
- In the browser URL
- In the common parent, passed down as props
Answer: In the common parent, passed down as props. The parent owns the single source of truth and passes it down to its children as props.
How does a child change state it does not own?
- By mutating the prop directly
- By calling a callback the parent passed down as a prop
- By using its own useState
- It cannot, ever
Answer: By calling a callback the parent passed down as a prop. The parent passes a callback down; the child calls it to request a change, and the parent updates its state.
What is the mantra for lifting state up?
- Data flows down, events flow up
- Events down, data up
- State flows sideways
- Props flow up, state flows down
Answer: Data flows down, events flow up. Data (the value) flows down as props; events (change requests via callbacks) flow up to the owner.
What is a 'single source of truth'?
- Two copies of state kept in sync manually
- A backend database
- One canonical copy of the data that all consumers read from
- A global window variable
Answer: One canonical copy of the data that all consumers read from. Storing the value once (in the parent) avoids duplicate copies that drift out of sync.
What goes wrong if each child keeps its own copy of shared state?
- Nothing, it is fine
- The copies can drift out of sync
- React throws an error
- The app cannot compile
Answer: The copies can drift out of sync. Duplicate state in each child can diverge; keeping one copy in the parent prevents drift.
Can a child mutate a prop it receives?
- Yes, props are mutable
- Only object props
- Only in class components
- No, props are read-only — call the parent's callback to request a change
Answer: No, props are read-only — call the parent's callback to request a change. Props are read-only; a child requests changes by calling a callback the parent passed in.
When should you lift state vs. reach for Context?
- Always use Context
- Lift to the nearest common parent for a few nearby components; use Context for many distant ones
- Never lift state
- They are identical
Answer: Lift to the nearest common parent for a few nearby components; use Context for many distant ones. Lift first to the nearest common ancestor; reach for Context only when many distant components need the data.
What problem does lifting state too high (e.g. to the app root) cause?
- Nothing
- The state becomes immutable
- Unnecessary re-renders across the whole tree
- It deletes the state
Answer: Unnecessary re-renders across the whole tree. Putting state higher than needed makes more of the tree re-render; lift only to the nearest common parent.