Why lifting state is needed in React - Visual Breakdown

Concept Flow - Why lifting state is needed

Two sibling components

↓

Need to share data

↓

State lifted up to common parent

↓

Parent holds state and passes as props

↓

Siblings receive shared state via props

↓

Siblings update state via callbacks to parent

When two components need to share data, the state is moved up to their common parent. The parent manages the state and passes it down as props.

Execution Sample

React

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  return <>
    <ChildA count={count} />
    <ChildB onIncrement={() => setCount(count + 1)} />
  </>;
}

function ChildA({ count }) {
  return <div>Count: {count}</div>;
}

function ChildB({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}

Parent holds count state and passes it to ChildA and a callback to ChildB to update it.

Execution Table

Step	Component	State/Props	Action	Result
1	Parent	count=0	Render ChildA and ChildB with props	ChildA receives count=0, ChildB receives onIncrement callback
2	ChildB	props.onIncrement	User clicks increment button	onIncrement called, triggers setCount(1) in Parent
3	Parent	count=0 -> 1	State updated, triggers re-render	ChildA receives updated count=1
4	ChildA	count=1	Renders with new count	UI shows updated count 1
5	ChildB	props.onIncrement	Ready for next user action	No change until next click
6	-	-	-	End: State shared and updated via lifted state in Parent

💡 User interaction triggers state update in Parent, which re-renders children with shared state.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
count	0	0	1	1

Key Moments - 2 Insights

Why can't ChildA and ChildB manage their own separate state to share data?

Because they are siblings, their states are isolated. Lifting state to the parent allows sharing via props, as shown in steps 1 and 3 of the execution_table.

How does ChildB update the shared state in Parent?

ChildB calls the onIncrement callback passed as a prop, which triggers setCount in Parent, updating the state and causing re-render (steps 2 and 3).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count in Parent after step 3?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'State/Props' column in step 3 of execution_table.

At which step does ChildA receive the updated count value?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for when ChildA renders with new count in execution_table.

If state was not lifted to Parent, what would happen when ChildB tries to update count?

A ChildA would automatically update

B Parent would update count

C ChildB could update its own count but ChildA would not see changes

D Both children would share state without lifting

💡 Hint

Refer to key_moments about sibling state isolation.

Concept Snapshot

Lifting state means moving shared state up to the closest common parent.
Parent holds the state and passes it down as props.
Children receive state and callbacks to update it.
This allows siblings to share and sync data.
Without lifting, siblings have isolated states.
Use callbacks to update lifted state from children.

Full Transcript

In React, when two sibling components need to share data, their state must be lifted to their common parent. The parent component holds the state and passes it down as props to the children. One child can receive the state value, and the other child can receive a callback function to update that state. When the callback is called, the parent updates the state and re-renders the children with the new shared data. This pattern ensures that siblings stay in sync. Without lifting state, siblings manage their own isolated states and cannot share data effectively.