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.

Practice

1. Why do we lift state up in React?
lifting state means moving state to a common parent component. What is the main reason for this?

easy

A. To improve the styling of components

B. To share the same state between multiple child components

C. To avoid using props in child components

D. To make each child component have its own separate state

Solution

1. Step 1: Understand what lifting state means

   Lifting state means moving state from child components to their common parent.

2. Step 2: Identify the purpose of lifting state

   This is done so multiple children can share and update the same state, keeping data consistent.

3. Final Answer:

   To share the same state between multiple child components -> Option B

4. Quick Check:

   Sharing state = lifting state [OK]

Hint: Lifting state shares data between siblings via parent [OK]

Common Mistakes:

• Thinking lifting state is for styling
• Believing lifting state means separate states
• Confusing lifting state with removing props

2. Which of the following is the correct way to lift state up in React?

easy

A. Use global variables instead of React state

B. Keep the state inside each child component separately

C. Move the state to the nearest common parent and pass it down as props

D. Remove state and use only static values

Solution

1. Step 1: Recall the pattern of lifting state

   State should be moved to the nearest common parent component to share it.

2. Step 2: Check the options for correct syntax

   Passing state down as props from the parent is the correct React pattern.

3. Final Answer:

   Move the state to the nearest common parent and pass it down as props -> Option C

4. Quick Check:

   Lift state = parent state + props down [OK]

Hint: Lift state to parent, pass as props down [OK]

Common Mistakes:

• Keeping state only in children
• Using global variables instead of React state
• Removing state completely

3. Consider this React code snippet:

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

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

function ChildB({ setCount }) {
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

What will happen when the button in ChildB is clicked?

medium

A. Nothing will change because state is not shared

B. The button will disappear

C. An error will occur because setCount is not passed correctly

D. The count displayed in ChildA will increase by 1

Solution

1. Step 1: Understand state lifting in the code

   The state count is in Parent and passed down to ChildA and ChildB.

2. Step 2: Analyze what happens on button click

   Clicking button calls setCount which updates count in Parent, causing ChildA to re-render with new count.

3. Final Answer:

   The count displayed in ChildA will increase by 1 -> Option D

4. Quick Check:

   Shared state update re-renders children [OK]

Hint: State in parent updates all children using it [OK]

Common Mistakes:

• Thinking state is local to ChildB only
• Assuming no re-render happens on state change
• Confusing props with state setters

4. You have two sibling components that need to share a counter state. You put the state inside one sibling and try to pass it to the other directly. Why is this a problem?

medium

A. Because siblings cannot directly share state; state must be lifted to their parent

B. Because React does not allow state in functional components

C. Because state can only be stored in global variables

D. Because props cannot be passed between siblings

Solution

1. Step 1: Understand React state sharing rules

   State lives inside a component and cannot be directly shared between sibling components.

2. Step 2: Identify correct sharing method

   To share state, it must be lifted to the nearest common parent, which passes it down as props.

3. Final Answer:

   Because siblings cannot directly share state; state must be lifted to their parent -> Option A

4. Quick Check:

   Siblings share state via parent [OK]

Hint: Siblings share state only via parent component [OK]

Common Mistakes:

• Thinking siblings can share state directly
• Believing React forbids state in functional components
• Confusing props passing between siblings

5. You have three components: Grandparent, Parent, and two siblings Child1 and Child2. Both children need to update and display the same piece of state. Where should you lift the state to and why?

hard

A. Lift the state to Parent because it is the nearest common ancestor of the children

B. Lift the state to Grandparent to make it global for all components

C. Keep the state inside Child1 and pass it to Child2 directly

D. Create separate states in both children and sync them manually

Solution

1. Step 1: Identify the nearest common ancestor of the siblings

   The siblings Child1 and Child2 share the Parent component as their closest common parent.

2. Step 2: Decide where to lift state for sharing

   Lifting state to Parent allows both children to access and update the same state easily without unnecessary complexity.

3. Final Answer:

   Lift the state to Parent because it is the nearest common ancestor of the children -> Option A

4. Quick Check:

   Lift state to nearest common parent [OK]

Hint: Lift state to nearest common parent of siblings [OK]

Common Mistakes:

• Lifting state too high unnecessarily
• Trying to share state directly between siblings
• Duplicating state in multiple components