Lifting state up
📚 What is Lifting State Up? When two or more sibling components need to share the same data, move that data UP to their common parent. The parent owns the state and passes it down as props. Children can also receive a callback prop to update the shared state. This is one of the most important Reac…
Appy Says…
Two sibling components both need the same piece of data. Neither can pass state to the other directly. The solution? Move the state UP to their common parent — then pass it down as props to both. This is 'lifting state up'.
What is Lifting State Up?
Lifting state up means moving shared state from a child component to the nearest common ancestor, then passing it down via props. This keeps a single source of truth.
- •State lives in the parent; passed to children as props
- •Children trigger changes by calling callback props (
onChange,onSelect) - •Pattern: parent holds state + updater; children receive both as props
- •When to lift: two components need the same data to stay in sync
- •Alternative for deeply nested sharing: React Context or state management (Zustand/Jotai)
Think of it like a shared Minecraft chest
Two players each need resources from the same inventory. Instead of duplicating the chest in each room, you put one shared chest in a central hallway — both rooms have access. Lifting state = the central hallway chest.
How It Works
- •1. Identify: two children need the same state
- •2. Find their lowest common ancestor component
- •3. Move the state declaration (
useState) to that ancestor - •4. Pass the value down as a prop to each child that reads it
- •5. Pass the setter (or a callback) down to children that need to change it
- •6. On child event: calls parent's callback → parent updates state → both children re-render
Real-World Examples
- •Tabbed UI: active tab state lives in parent; TabBar and TabPanel both receive it as prop
- •Shopping cart total: item count state in App; CartIcon and CartList both read it
- •Filter + list: filter state in parent; SearchBar updates it, ProductList reads it
- •Colour picker + preview: selected colour in parent; both components receive it
Key Facts
- •Lifting state is fine for 2–3 levels; for deeply nested sharing use Context or state library
- •React's official docs use lifting state as the first example of component coordination
- •Prop drilling = passing props through many intermediate components that don't use them — a sign to consider Context
- •Zustand/Jotai solve this without lifting: any component can read/write shared state directly
Watch Out!
Don't lift state too high too early. If only two siblings need to share, lift to their parent. Lifting to App root for everything creates performance issues and prop drilling. Lift to the nearest common ancestor, no higher.
Remember
Shared state belongs in the lowest common ancestor. Pass the value down as a prop; pass the setter (callback) down so children can update it.
What You Learned
- •Lifting state: move shared state to the nearest common ancestor and pass down via props
- •Children update parent state via callback props; all siblings stay in sync
- •Unlocks: coordinating sibling components, filter+list patterns, tabbed UIs
Key Facts
- →Lifting state is fine for 2–3 levels; for deeply nested sharing use Context or state library
- →React's official docs use lifting state as the first example of component coordination
- →Prop drilling = passing props through many intermediate components that don't use them — a sign to consider Context
- →Zustand/Jotai solve this without lifting: any component can read/write shared state directly
Real-World Examples
Remember
Shared state belongs in the lowest common ancestor. Pass the value down as a prop; pass the setter (callback) down so children can update it.
Quick Quiz
Where do we put shared state?