React Academy · Lesson

Lifting State Up: Principles & Examples

Move shared state to the closest common ancestor and pass it down via props.

Lifting State Up: Principles & Examples is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn the lifting state up pattern — moving shared state to the closest common ancestor so sibling components can stay in sync.

The Problem: Out-of-Sync Siblings

When two sibling components both need the same data, keeping separate state in each leads to synchronisation bugs. The fix is to move state to their common parent.

Identifying the Common Ancestor

Find the closest component that is a parent of **both** components that need the shared data. Move the state there and pass it down as props.

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Lifting a Counter Example

Suppose two components show the same counter. Instead of managing count in each, lift it to their parent. Both receive count as a prop and call an onChange callback to update it.

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Callback Props for Updates

Children cannot directly modify parent state. The parent passes a callback (like `onChange`) as a prop. Children call the callback when they want to request a state change.

Controlled vs Uncontrolled After Lifting

After lifting, the child that previously owned state becomes a **controlled component** — it receives current value and onChange from its parent. The parent is the single source of truth.

Multi-Level Lifting

Sometimes you need to lift state several levels up the tree. If state needs to be lifted past many intermediate components, consider Context instead to avoid prop threading.

Benefits of Lifting State

Lifting state gives you one source of truth, makes data flow predictable (always top-down), simplifies debugging, and makes it easy to add more consumers of the same state later.

Derived State from Lifted State

Compute derived values from lifted state inside the parent and pass them as additional props. Never duplicate state — derive it.

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

When Lifting Becomes Excessive

If you find yourself lifting state through 4+ levels, the component tree structure may be wrong or it is time for Context or a state management library.

Quick Check

What is the correct approach when two sibling components need to share the same piece of state?

Recap

Lift state to the closest common ancestor when siblings need to share it. Pass current value down and change callbacks up. Derive values rather than duplicating state.

Up Next

Next lesson: **Prop Drilling: When It Hurts & When It's Fine** — you will identify problematic drilling chains and decide when they need a solution.

Frequently asked questions

Is the “Lifting State Up: Principles & Examples” lesson free?

Yes — the full text of “Lifting State Up: Principles & Examples” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Lifting State Up: Principles & Examples”?

Move shared state to the closest common ancestor and pass it down via props. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Lifting State Up: Principles & Examples” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Lifting State Up: Principles & Examples
Prop Drilling: When It Hurts & When It's Fine
Sibling Communication Patterns
Choosing the Right State Location

← Back to React Academy