Lifting State Up

How to share data between sibling components by moving state to their closest common ancestor.

React4 min readConcept 20 of 46

The Sibling Problem

Because data in React only flows downwards (One-Way Data Flow), sibling components cannot pass data directly to each other.

If Sidebar and MainContent both need to know if the menu is open, you can't keep isOpen inside the Sidebar component. MainContent would never be able to read it.

To fix this, you move the useState call up into their parent component (e.g., App), and pass the state down to both siblings via props. This is called **Lifting State Up**.

Controlled Components in Practice

Lifting state up is the exact reason the 'Controlled Component' pattern exists.

When you lift state out of a component, that component loses its local state and relies entirely on props from its parent. It goes from being uncontrolled to controlled.

The 3-Step Process

**1. Remove state from the child:** Delete the useState call from the child component.

**2. Add state to the parent:** Paste the useState call into the closest common parent of the components that need the data.

**3. Pass props down:** Pass the state value and the state setter function down to the children as props.

Interactive Diagram

Click 'Lift State Up' to see how moving state to the parent allows data to flow downwards to both siblings.

// 1. Before Lifting
function Parent() {
return (
);
}
 
function ChildA() {
const [data, setData] = useState(0); // Trapped here!
return
{data}
;
}
 
// ----------------------------
// 2. After Lifting
function Parent() {
const [data, setData] = useState(0); // Lifted!
return (
data={data} />
data={data} />
);
}
Parent
Child A
Child BNeeds Data!
useState
Trapped

Click the button below to 'Lift State Up'. Watch how moving the state to the Parent component allows data to flow downwards to both children.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why must state be lifted up to share it between siblings?
  2. 2When you lift state out of a child component, what does that child become?
  3. 3What is the primary downside of lifting state up too high in the component tree?

Remember this

  • Siblings cannot share data directly.
  • Move state to the closest common parent to share it.
  • Lifting state converts children into controlled components.
  • Lift state only as high as necessary to avoid prop drilling.

Done with this concept?

Mark it complete to track your progress. No login needed.