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.