Why lifting state is needed in React - Why It Works This Way

Overview - Why lifting state is needed

What is it?

Lifting state means moving shared data up to a common parent component in React. This allows multiple child components to access and update the same information. Instead of each component having its own separate copy, they share one source of truth. This helps keep the app consistent and easier to manage.

Why it matters

Without lifting state, components would have isolated data that can easily get out of sync. Imagine two friends trying to plan a trip but never talking to each other; they might book different dates or places. Lifting state is like having a shared calendar so everyone sees the same plan. It prevents bugs and confusion in apps where many parts depend on the same data.

Where it fits

Before learning lifting state, you should understand React components and how state works inside them. After mastering lifting state, you can explore more advanced patterns like context, reducers, or state management libraries that handle shared data on a larger scale.

Mental Model

Core Idea

Lifting state means moving shared data up to the closest common parent so multiple components can stay in sync.

Think of it like...

It's like a family sharing one fridge instead of each person having their own mini-fridge. Everyone puts food in and takes food out from the same place, so no one gets confused or runs out unexpectedly.

Parent Component
┌─────────────────────┐
│      State Here     │
│  ┌───────────────┐  │
│  │ Child A       │  │
│  └───────────────┘  │
│  ┌───────────────┐  │
│  │ Child B       │  │
│  └───────────────┘  │
└─────────────────────┘

Child A and Child B both read and update the shared state in the parent.

Build-Up - 7 Steps

1

Foundation

Understanding React Component State

Concept: Learn what state is inside a React component and how it controls what the component shows.

In React, each component can have its own state, which is like a memory for that component. For example, a button can remember if it was clicked or not. This state is private and only affects that component unless shared.

Result

You can create interactive components that change what they display based on user actions.

Understanding component state is the base for managing data in React apps.

2

Foundation

Props: Passing Data Down Components

Concept: Learn how data flows from parent to child components using props.

Props are like gifts a parent component gives to its children. They are read-only and let children know what to display or how to behave. However, children cannot change props directly.

Result

You can build components that receive data and show it, but cannot change it themselves.

Knowing props lets you see how data flows down but not up in React.

3

Intermediate

The Problem of Duplicate State

🤔Before reading on: do you think two sibling components can share state independently without issues? Commit to yes or no.

Concept: Discover why having the same state duplicated in multiple components causes problems.

If two sibling components each keep their own copy of the same data, they can get out of sync. For example, if one updates and the other doesn't, the app shows conflicting information. This breaks the idea of a single source of truth.

Result

You realize that duplicating state leads to bugs and inconsistent UI.

Understanding this problem motivates the need to lift state up to a common parent.

4

Intermediate

Lifting State Up Explained

🤔Before reading on: do you think moving state to a parent helps siblings share data? Commit to yes or no.

Concept: Learn how moving state to the closest common parent solves the duplication problem.

Instead of each sibling having its own state, you move the shared state to their parent. The parent holds the data and passes it down as props. It also passes functions to update the state. This way, siblings stay in sync by reading and updating the same state.

Result

Components share one source of truth and stay consistent.

Knowing how to lift state is key to managing shared data in React.

5

Intermediate

Implementing Lifting State in Code

Concept: See a simple React example where state is lifted to a parent and shared by children.

Imagine two input boxes that show the same text. Instead of each having its own state, the parent holds the text state. It passes the text and a function to update it to both inputs. When one input changes, it calls the parent's function, updating the shared state and both inputs show the same text.

Result

Both inputs stay synchronized and show the same value.

Seeing code makes the concept concrete and shows how to apply lifting state.

6

Advanced

When Lifting State Becomes Complex

🤔Before reading on: do you think lifting state always solves all shared data problems? Commit to yes or no.

Concept: Explore the limits of lifting state when many components need the same data.

When many components at different levels need shared data, lifting state up can lead to very high parent components holding lots of state. This makes the code harder to maintain and pass props through many layers (prop drilling). In such cases, other solutions like context or state management libraries are better.

Result

You understand when lifting state is not enough and other tools are needed.

Knowing the limits of lifting state helps choose the right approach for bigger apps.

7

Expert

Avoiding Common Pitfalls with Lifting State

🤔Before reading on: do you think lifting state always improves performance? Commit to yes or no.

Concept: Learn about performance and re-rendering issues caused by lifting state and how to handle them.

Lifting state causes the parent to re-render whenever the state changes, which can cause all children to re-render even if they don't need to. This can slow down apps. Experts use techniques like memoization, React.memo, or splitting state to optimize rendering. Understanding this helps build efficient React apps.

Result

You can lift state without hurting app performance.

Knowing performance tradeoffs prevents common bugs and slow apps in production.

Under the Hood

React components hold state internally as objects managed by React's rendering engine. When state changes, React schedules a re-render of that component and its children. Lifting state moves the state object to a parent component, so updates trigger re-renders from that parent down. React uses a virtual DOM to efficiently update only changed parts on the screen.

Why designed this way?

React was designed with one-way data flow to keep apps predictable. Lifting state fits this by centralizing shared data in one place, avoiding conflicts. Alternatives like two-way binding were avoided to reduce bugs and make data flow easier to understand.

┌───────────────┐        ┌───────────────┐        ┌───────────────┐
│ Child A      │◄───────│ Parent State  │───────►│ Child B      │
│ (reads props)│        │ (holds state) │        │ (reads props)│
└───────────────┘        └───────────────┘        └───────────────┘

State updates flow up from children to parent via callbacks,
then parent passes updated state down as props.

Myth Busters - 4 Common Misconceptions

Quick: Does lifting state mean all state must be in the topmost component? Commit yes or no.

Common Belief: Lifting state means putting all state in the highest component possible.

Reality: You only lift state to the closest common parent that needs to share it, not always the topmost component.

Why it matters: Putting state too high causes unnecessary re-renders and makes code harder to maintain.

Quick: Does lifting state automatically fix all bugs related to shared data? Commit yes or no.

Common Belief: Lifting state always solves synchronization bugs perfectly.

Reality: While it helps, lifting state alone doesn't fix bugs caused by improper updates or stale closures.

Why it matters: Relying blindly on lifting state can hide bugs and cause confusing behavior.

Quick: Can sibling components update each other's state directly without lifting? Commit yes or no.

Common Belief: Sibling components can directly change each other's state without lifting it up.

Reality: Sibling components cannot directly change each other's state; they must communicate through a shared parent.

Why it matters: Trying to update sibling state directly breaks React's data flow and causes bugs.

Quick: Does lifting state always improve app performance? Commit yes or no.

Common Belief: Lifting state always makes the app faster and more efficient.

Reality: Lifting state can cause extra re-renders and slow down the app if not managed carefully.

Why it matters: Ignoring performance impacts leads to slow apps and poor user experience.

Expert Zone

1

Lifting state can cause prop drilling, where props pass through many layers; using context or hooks can reduce this.

2

Splitting state into smaller pieces in the parent can optimize rendering by limiting which children update.

3

Callbacks passed down to children should be memoized to avoid unnecessary re-renders.

When NOT to use

Avoid lifting state when many unrelated components need the same data across different parts of the app. Instead, use React Context API or state management libraries like Redux or Zustand for global state.

Production Patterns

In real apps, lifting state is used for local shared data like form inputs or toggles. For larger apps, it is combined with context or external stores. Developers also use custom hooks to encapsulate lifted state logic for reuse.

Connections

Single Source of Truth

Lifting state implements the single source of truth principle in React apps.

Understanding lifting state helps grasp why having one place for data prevents bugs and confusion.

Event Bubbling in Web Browsers

Both involve passing information up a hierarchy to a common ancestor.

Knowing event bubbling clarifies how child components communicate changes up to parents in React.

Centralized Control in Organizations

Lifting state is like centralizing decisions to a manager who coordinates multiple teams.

Seeing lifting state as centralized control helps understand why shared data must be managed carefully to avoid conflicts.

Common Pitfalls

#1 Keeping duplicate state in sibling components causes inconsistent UI.

Wrong approach:

function Siblings() {
const [valueA, setValueA] = React.useState('');
const [valueB, setValueB] = React.useState('');
return (
<>

);
}

Correct approach:

function Parent() {
const [value, setValue] = React.useState('');
return (
<>

);
}

Root cause:

Misunderstanding that each component needs its own state instead of sharing one source.

#2 Passing state too high causes unnecessary re-renders and complex props.

Wrong approach:

function App() {
const [data, setData] = React.useState('');
return ;
}
// DeeplyNestedComponent passes props down many layers

Correct approach:

Lift state only to the nearest common parent of components that need it, or use context for deep sharing.

Root cause:

Believing higher is always better for state placement.

#3 Not memoizing callbacks passed to children causes extra renders.

Wrong approach:

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

Correct approach:

function Parent() {
const [count, setCount] = React.useState(0);
const increment = React.useCallback(() => setCount(c => c + 1), []);
return ;
}

Root cause:

Not realizing that inline functions create new references each render.

Key Takeaways

Lifting state means moving shared data to the closest common parent so multiple components can access and update it together.

It solves the problem of duplicated state causing inconsistent UI by creating a single source of truth.

Lifting state fits React's one-way data flow and helps keep apps predictable and easier to debug.

However, lifting state too high or without optimization can cause performance issues and complex code.

Knowing when and how to lift state is essential for building clean, maintainable React applications.

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