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.

Practice

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

easy

A. To make components independent

B. To share state between sibling components

C. To avoid using props

D. To store state only in child components

Solution

1. Step 1: Understand lifting state concept

   Lifting state means moving state to a common parent so multiple children can access it.

2. Step 2: Identify the purpose of lifting state

   This is done to share state between sibling components and keep data in sync.

3. Final Answer:

   To share state between sibling components -> Option B

4. Quick Check:

   Lifting state = sharing state [OK]

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

Common Mistakes:

• Thinking lifting state makes components independent
• Believing lifting state removes props usage
• Assuming state stays only in children

2. Which of the following is the correct way to pass state and its updater function from a parent to a child component in React?

easy

A. <Child state={state} setState={setState} />

B. <Child state=setState />

C. <Child setState={state} state={setState} />

D. <Child state=setState() />

Solution

1. Step 1: Recall React props syntax

   Props are passed as name={value}. To pass state and updater, use state={state} and setState={setState}.

2. Step 2: Check each option's syntax

   <Child state={state} setState={setState} /> correctly passes both as props. Others misuse assignment or call functions incorrectly.

3. Final Answer:

   <Child state={state} setState={setState} /> -> Option A

4. Quick Check:

   Props pass state and updater correctly [OK]

Hint: Props use curly braces for variables [OK]

Common Mistakes:

• Passing functions without curly braces
• Calling updater functions instead of passing them
• Swapping state and updater names

3. Given this parent component code:

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

What will happen when the Button is clicked?

medium

A. Nothing happens because count is not updated

B. The Button component will re-render but count stays the same

C. The count displayed by Display increases by 1

D. An error occurs because setCount is not passed to Button

Solution

1. Step 1: Understand state and props flow

   The Parent holds count state and passes count to Display and an onClick handler to Button.

2. Step 2: Analyze Button click effect

   Clicking Button calls setCount(count + 1), updating state and causing Parent to re-render with new count.

3. Final Answer:

   The count displayed by Display increases by 1 -> Option C

4. Quick Check:

   State update triggers re-render and display update [OK]

Hint: State update in parent re-renders children with new props [OK]

Common Mistakes:

• Thinking Button needs count prop to update
• Believing setCount must be passed to Display
• Assuming no re-render happens on state change

4. Identify the error in this code snippet where a parent tries to lift state:

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

medium

A. setValue prop is incorrectly assigned the state value instead of the updater function

B. value state is not initialized properly

C. Child component is missing parentheses

D. React.useState should be React.state

Solution

1. Step 1: Check props passed to Child

   Parent passes value={value} correctly but setValue={value} incorrectly passes the state value instead of the updater function.

2. Step 2: Understand correct usage

   setValue should be passed as setValue={setValue} to allow Child to update state.

3. Final Answer:

   setValue prop is incorrectly assigned the state value instead of the updater function -> Option A

4. Quick Check:

   Updater function must be passed, not state value [OK]

Hint: Pass updater function, not state value, as setState prop [OK]

Common Mistakes:

• Confusing state variable with updater function
• Forgetting curly braces around variables
• Assuming React.useState is incorrect

5. You have two sibling components, InputA and InputB, both need to update and display the same text value. Which pattern correctly lifts state to their parent to keep them in sync?

hard

A. Use local variables in siblings without state

B. Store text state separately in each sibling, update independently

C. Store text state in one sibling and pass it down to the other sibling

D. Store text state in parent, pass text and setText to both siblings as props

Solution

1. Step 1: Understand shared state need

   Both siblings must show and update the same text, so state must be shared.

2. Step 2: Apply lifting state pattern

   Lift text state to their common parent and pass text and setText as props to both siblings.

3. Step 3: Evaluate other options

   Storing state separately or in one sibling breaks sync; local variables don't persist or trigger re-renders.

4. Final Answer:

   Store text state in parent, pass text and setText to both siblings as props -> Option D

5. Quick Check:

   Lift state to parent for shared updates [OK]

Hint: Lift shared state to parent, pass state and updater down [OK]

Common Mistakes:

• Keeping separate states in siblings causing out-of-sync
• Passing state only one way between siblings
• Using local variables instead of state