Common lifting state patterns in React - Deep Dive

Overview - Common lifting state patterns

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. It helps keep the app's data organized and consistent. Without lifting state, components might have conflicting or outdated data.

Why it matters

Without lifting state, components would manage their own separate copies of data, causing confusion and bugs. Imagine two friends trying to plan a trip but never sharing their plans; they would end up with mismatched details. Lifting state solves this by having one source of truth everyone agrees on, making apps reliable and easier to maintain.

Where it fits

Before learning lifting state, you should understand React components, props, and basic state management with hooks like useState. After mastering lifting state, you can explore more advanced state management tools like Context API or Redux, which help manage state across many components.

Mental Model

Core Idea

Lifting state means moving shared data up to the closest common parent so all child components can access and update it consistently.

Think of it like...

It's like a family sharing a single calendar on the fridge instead of each person having their own separate calendar. Everyone looks at and updates the same calendar to avoid confusion.

Parent Component
┌─────────────────────────┐
│       Holds shared       │
│         state           │
│                         │
│  ┌─────────┐  ┌─────────┐│
│  │ Child A │  │ Child B ││
│  │ reads & │  │ reads & ││
│  │ updates │  │ updates ││
│  │ shared  │  │ shared  ││
│  │ state   │  │ state   ││
│  └─────────┘  └─────────┘│
└─────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding React component state

Concept: Learn how components hold and update their own data using state.

In React, each component can have its own state using the useState hook. For example, a button can track how many times it was clicked by storing a number in state and updating it on each click.

Result

The component updates its display when the state changes, showing the current count.

Understanding that components can hold their own data is the first step before sharing data between components.

2

Foundation

Passing data with props

Concept: Learn how parent components send data to children using props.

Props are like parameters you give to child components. For example, a parent can pass a message string to a child, and the child shows it on the screen. Props are read-only inside children.

Result

The child component displays the message passed from the parent.

Knowing how data flows down from parent to child helps understand why lifting state moves data up.

3

Intermediate

Why lift state up?

🤔Before reading on: do you think each component should keep its own state or share state when they need the same data? Commit to your answer.

Concept: When multiple components need the same data, it should live in their closest common parent.

If two sibling components both need to know and update the same value, keeping separate states causes them to get out of sync. Lifting state up means moving that state to their parent, which passes it down as props and provides update functions.

Result

Both siblings see the same data and stay in sync when one updates it.

Understanding that shared state must live in a common parent prevents bugs from inconsistent data.

4

Intermediate

Lifting state with callback props

🤔Before reading on: do you think children can update parent state directly or only through functions passed down? Commit to your answer.

Concept: Parents pass down both the state and functions to update it, so children can trigger changes.

The parent defines a state and a function to update it. It passes the state and the function as props to children. Children call the function when they want to change the state. This way, the parent controls the data, and children can request updates.

Result

When a child triggers the update function, the parent's state changes and updates all children using that state.

Knowing that children cannot change parent state directly but use callbacks clarifies React's one-way data flow.

5

Intermediate

Common lifting state patterns

🤔Before reading on: which pattern do you think is best for many siblings sharing state: lifting to immediate parent or lifting higher up? Commit to your answer.

Concept: There are patterns like lifting state to immediate parent, lifting higher up for many components, or using a shared state container.

If only siblings share state, lift it to their immediate parent. If many components across the tree need it, lift higher or use Context. Sometimes, you lift state up multiple levels to find the best common ancestor that covers all components needing the data.

Result

State is placed where it best serves all components needing it without unnecessary complexity.

Understanding where to lift state balances simplicity and sharing needs, avoiding overcomplicated or duplicated state.

6

Advanced

Avoiding prop drilling with lifting state

🤔Before reading on: do you think lifting state always means passing props through every level? Commit to your answer.

Concept: Lifting state can cause 'prop drilling' where props pass through many layers. Alternatives exist to avoid this.

When state is lifted high, passing it down through many components can be tedious and error-prone. To avoid this, React's Context API or state management libraries can provide the state directly to components that need it, skipping intermediate layers.

Result

Components access shared state without unnecessary prop passing, making code cleaner and easier to maintain.

Knowing the limits of lifting state and when to use Context or libraries prevents messy code and improves scalability.

7

Expert

Performance considerations in lifting state

🤔Before reading on: do you think lifting state always improves performance or can it sometimes cause slowdowns? Commit to your answer.

Concept: Lifting state can cause unnecessary re-renders if not managed carefully, affecting app performance.

When state lives high in the tree, any change causes all children receiving that state to re-render, even if they don't need the changed part. Techniques like memoization, splitting state, or using selectors help reduce unnecessary updates.

Result

Apps remain responsive and efficient even with shared state by minimizing re-renders.

Understanding how lifting state affects rendering helps build performant React apps and avoid subtle bugs.

Under the Hood

React components re-render when their state or props change. Lifting state moves the state to a parent component, so when the state updates, React re-renders that parent and all its children receiving the state as props. React uses a virtual DOM to efficiently update only what changed on the screen.

Why designed this way?

React enforces one-way data flow from parent to child to keep data predictable and easier to debug. Lifting state fits this model by centralizing shared data in one place, avoiding conflicts and making updates explicit. Alternatives like two-way binding were avoided to reduce complexity and bugs.

┌───────────────┐       ┌───────────────┐
│ Parent State  │──────▶│ Child A Props │
│ (useState)    │       └───────────────┘
│               │       ┌───────────────┐
│ updateFunc()  │──────▶│ Child B Props │
└───────────────┘       └───────────────┘

State updates in Parent trigger re-render of Parent and Children.

Myth Busters - 4 Common Misconceptions

Quick: Does lifting state mean children can directly change parent state? Commit yes or no.

Common Belief: Children can directly modify the parent's state variables.

Reality: Children cannot change parent state directly; they only receive functions from the parent to request updates.

Why it matters: Trying to change parent state directly breaks React's data flow and causes bugs or errors.

Quick: Is lifting state always the best way to share data? Commit yes or no.

Common Belief: Lifting state is always the best solution for sharing data between components.

Reality: Lifting state is good for small to medium sharing but can cause prop drilling in large apps, where Context or state libraries are better.

Why it matters: Overusing lifting state leads to complex, hard-to-maintain code with many props passed unnecessarily.

Quick: Does lifting state guarantee better performance? Commit yes or no.

Common Belief: Lifting state always improves app performance by centralizing data.

Reality: Lifting state can cause more re-renders and slowdowns if not optimized properly.

Why it matters: Ignoring performance effects can make apps sluggish and hard to debug.

Quick: Can you lift state to any component arbitrarily? Commit yes or no.

Common Belief: You can lift state to any component regardless of its position in the tree.

Reality: State should be lifted to the closest common ancestor of all components needing it to avoid unnecessary renders and complexity.

Why it matters: Lifting state too high or too low causes inefficient updates or missing data sharing.

Expert Zone

1

Lifting state too high can cause excessive re-renders; splitting state into smaller pieces can improve performance.

2

Callback functions passed down should be memoized to prevent unnecessary child re-renders.

3

Sometimes lifting state is combined with useReducer for complex state logic shared across components.

When NOT to use

Avoid lifting state when many unrelated components need the data; use Context API or state management libraries like Redux or Zustand instead for better scalability and cleaner code.

Production Patterns

In real apps, lifting state is often combined with Context to avoid prop drilling. Developers also split state into domain-specific slices and use memoization hooks like useMemo and React.memo to optimize rendering.

Connections

Flux architecture

Builds on lifting state by adding unidirectional data flow with actions and stores.

Understanding lifting state helps grasp Flux's single source of truth and controlled updates.

Database normalization

Similar pattern of centralizing shared data to avoid duplication and inconsistency.

Knowing how lifting state avoids duplicated data in UI mirrors how normalization avoids duplicated data in databases.

Centralized control in organizations

Both involve moving decision-making to a central place to keep everyone coordinated.

Seeing lifting state as central control helps understand why it prevents conflicting updates and confusion.

Common Pitfalls

#1 Passing state down too many levels causes messy code and hard maintenance.

Wrong approach:

function GreatGrandparent() {
const [value, setValue] = React.useState(0);
return ;
}

function Grandparent(props) {
return ;
}

function Parent(props) {
return ;
}

function Child(props) {
return ;
}

Correct approach:

Use React Context or lift state only to the nearest common ancestor to avoid deep prop passing.

Root cause:

Misunderstanding where to place shared state and how to avoid prop drilling.

#2 Children trying to update parent state directly causes errors.

Wrong approach:

function Child() {
const [count, setCount] = React.useState(0);
// Trying to update parent's state directly (not possible)
count = count + 1; // Wrong
}

Correct approach:

Parent passes setCount function as prop; child calls it to update state.
function Child({ count, setCount }) {
return ;
}

Root cause:

Not understanding React's one-way data flow and state immutability.

#3 Lifting state too high causes unnecessary re-renders and slow app.

Wrong approach:

function App() {
const [data, setData] = React.useState(0);
return (
<>

);
}
// All components re-render on any data change, even if only one needs it.

Correct approach:

Split state or use memoization to limit re-renders.
Use React.memo or move state closer to components that need it.

Root cause:

Not considering performance impact of state location.

Key Takeaways

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

Children cannot change parent state directly; they use functions passed down as props to request updates.

Lifting state prevents data duplication and keeps UI consistent but can cause prop drilling if lifted too high.

To avoid prop drilling and performance issues, use Context API or state management libraries when apps grow.

Understanding where and how to lift state is key to building clean, maintainable, and efficient React applications.