Common lifting state patterns in React - Step-by-Step Execution

Concept Flow - Common lifting state patterns

Child A needs state

↓

State lifted to Parent

↓

Parent holds state

↓

Parent passes state and setter to Child A

↓

Child A updates state via setter

↓

Parent updates state and re-renders

↓

Updated state passed down to Child A and Child B

↓

Child B uses updated state

State is moved up to the parent so multiple children can share and update it, keeping data in sync.

Execution Sample

React

import React, { useState } from 'react';

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

Parent component holds count state and passes it with setter to ChildA and count to ChildB.

Execution Table

Step	Action	State Before	State After	Component Rendered	Output/Behavior
1	Parent initializes count=0	count=undefined	count=0	Parent	Renders ChildA and ChildB with count=0
2	ChildA renders with count=0	count=0	count=0	ChildA	Shows count=0, has button to increment
3	ChildB renders with count=0	count=0	count=0	ChildB	Shows count=0
4	User clicks increment in ChildA	count=0	count=0	ChildA	Calls setCount(1)
5	Parent updates count to 1	count=0	count=1	Parent	Triggers re-render of Parent and children
6	ChildA re-renders with count=1	count=1	count=1	ChildA	Shows updated count=1
7	ChildB re-renders with count=1	count=1	count=1	ChildB	Shows updated count=1
8	No more actions	count=1	count=1	None	State stable, UI updated

💡 User stops interaction; state is stable and UI reflects latest count.

Variable Tracker

Variable	Start	After Step 1	After Step 4	After Step 5	Final
count	undefined	0	0	1	1

Key Moments - 3 Insights

Why does ChildB update even though it doesn't have a setter?

Because Parent holds the state and passes count as a prop to ChildB, when Parent updates count, ChildB re-renders with new value (see steps 5-7).

Why do we lift state to Parent instead of keeping it in ChildA?

Lifting state to Parent allows multiple children (ChildA and ChildB) to share the same state and stay in sync, as shown in the flow from step 1 to 7.

What happens if ChildA calls setCount with the same value as current state?

React will not re-render because state didn't change, so ChildB won't update either (not shown in table but important to know).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 5?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'State After' column at step 5 in the execution_table.

At which step does ChildB first render with the updated count?

A Step 6

B Step 7

C Step 3

D Step 4

💡 Hint

Look for ChildB rendering with count=1 in the execution_table rows.

If we remove setCount from ChildA props, what changes in the execution?

A ChildB stops rendering

B Parent state updates automatically

C ChildA cannot update count, so count stays 0

D No change, everything works the same

💡 Hint

Refer to step 4 where ChildA calls setCount to update state.

Concept Snapshot

Lifting state means moving state up to a common parent.
Parent holds the state and passes it down as props.
Children receive state and setter functions as needed.
Updating state in parent triggers re-render of all children.
This keeps shared data consistent across components.

Full Transcript

In React, lifting state means moving the state from a child component up to their common parent. This allows multiple children to share and update the same state. The parent holds the state and passes it down as props to children. One child can receive the state and a setter function to update it. When the setter is called, the parent updates the state and re-renders. This causes all children receiving that state to update their display. This pattern keeps data consistent and synchronized across components that need to share it.