Lifting state up in React Native - Deep Dive

Overview - Lifting state up

What is it?

Lifting state up means moving shared data to a common parent component so multiple child components can use and update it. Instead of each child having its own separate data, the parent holds the data and passes it down as needed. This helps keep the app's data organized and consistent.

Why it matters

Without lifting state up, different parts of an app might have conflicting or outdated information, causing bugs and confusing behavior. Lifting state up solves this by making sure all components share the same source of truth. This leads to smoother user experiences and easier app maintenance.

Where it fits

Before learning lifting state up, you should understand React Native components and how state works inside them. After mastering lifting state up, you can explore more advanced state management tools like Context API or Redux.

Mental Model

Core Idea

Lifting state up means moving shared data to the closest common parent so all children stay in sync.

Think of it like...

Imagine a family sharing one calendar on the fridge instead of each person having their own. Everyone looks at the same calendar to know the plans, so no one gets confused.

Parent Component
  ├─ Holds shared state
  ├─ Passes data as props
  ├─ Receives updates from children
  ├─
  ├─ Child A (reads and updates state)
  └─ Child B (reads and updates state)

Build-Up - 7 Steps

1

Foundation

Understanding component state basics

Concept: Learn what state is and how components hold their own data.

In React Native, each component can have its own state using useState hook. State is like a component's memory that stores information it needs to display or use. For example, a button can remember if it was clicked or not.

Result

You can create components that remember and show changing information.

Understanding state is the first step to managing data flow in an app.

2

Foundation

Props: passing data between components

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

Props are like parameters you give to a component. A parent component can pass data to a child by adding attributes. The child reads these props but cannot change them directly.

Result

Child components can display or use data given by their parent.

Props let components communicate downwards, but not upwards.

3

Intermediate

Problem: duplicated state in siblings

🤔Before reading on: do you think sibling components can share state easily if each keeps its own? Commit to yes or no.

Concept: When two sibling components each have their own state, they can get out of sync.

Imagine two input boxes that should show the same text. If each input has its own state, typing in one won't update the other. This causes inconsistent UI and bugs.

Result

Sibling components with separate state do not stay synchronized.

Knowing this problem shows why a shared state is needed.

4

Intermediate

Solution: lifting state up to parent

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

Concept: Move the shared state to the closest common parent component and pass it down as props.

Instead of each sibling having its own state, the parent holds the state and passes it to both siblings. The siblings notify the parent when they want to change the state, and the parent updates it. This keeps siblings in sync.

Result

Siblings share one source of truth and update together.

Understanding lifting state up is key to managing shared data in React Native.

5

Intermediate

Implementing lifting state up in React Native

Concept: Learn the code pattern to lift state up using useState and callbacks.

1. Parent uses useState to hold shared data. 2. Parent passes data and a setter function as props to children. 3. Children call the setter function to update the state. Example: import React, { useState } from 'react'; import { View } from 'react-native'; const Parent = () => { const [text, setText] = useState(''); return ( ); };

Result

Children display and update the same shared text state.

Knowing this pattern lets you coordinate data between components easily.

6

Advanced

Avoiding excessive lifting and prop drilling

🤔Before reading on: do you think lifting state up too far can cause problems? Commit to yes or no.

Concept: Lifting state too high can make code complex and hard to maintain due to passing props through many layers.

If you lift state to a very high parent, many intermediate components must pass props they don't use. This is called prop drilling and can clutter code. Alternatives like Context API help avoid this.

Result

Recognize when lifting state up is too much and when to use other tools.

Knowing limits of lifting state up helps keep code clean and scalable.

7

Expert

Performance considerations with lifted state

🤔Before reading on: do you think lifting state up can affect app performance? Commit to yes or no.

Concept: Changing lifted state causes all children receiving it to re-render, which can impact performance.

When the parent state changes, React re-renders the parent and all children that use that state. If many components depend on the state, this can slow the app. Techniques like memoization and splitting state can help.

Result

Understand how lifting state affects rendering and how to optimize.

Knowing rendering behavior prevents performance bugs in complex apps.

Under the Hood

React Native uses a virtual tree of components. When state changes, React compares the new tree with the old one and updates only the parts that changed. Lifting state up means the parent holds the data, so when it changes, React re-renders the parent and all children receiving that data as props. This keeps the UI consistent but can cause more re-renders.

Why designed this way?

React's design favors a single source of truth for shared data to avoid inconsistencies. Lifting state up enforces this by centralizing state. Alternatives like global stores came later to handle complex cases. This design balances simplicity and predictability.

┌───────────────┐
│   Parent      │
│  (state)      │
│  useState()   │
│  setState()   │
└─────┬─────────┘
      │ props
 ┌────┴─────┐
 │          │
Child A   Child B
(reads & updates via props)

Myth Busters - 3 Common Misconceptions

Quick: Do you think lifting state up means duplicating state in every component? Commit yes or no.

Common Belief: Lifting state up means copying the same state into every component that needs it.

Reality: Lifting state up means moving the state to a common parent and passing it down, not duplicating it.

Why it matters: Duplicating state causes bugs and inconsistent UI because components can get out of sync.

Quick: Do you think children can update their own props directly? Commit yes or no.

Common Belief: Children can change the props they receive from their parent directly.

Reality: Props are read-only; children must notify the parent to update state, which then passes new props down.

Why it matters: Trying to change props directly breaks React's data flow and causes errors.

Quick: Do you think lifting state up always improves performance? Commit yes or no.

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

Reality: Lifting state up can cause unnecessary re-renders if not managed carefully, hurting performance.

Why it matters: Ignoring this can lead to slow apps and poor user experience.

Expert Zone

1

Lifting state up is not just about sharing data but also about controlling who can change it, enforcing unidirectional data flow.

2

Sometimes splitting state into smaller pieces and lifting only what is needed improves performance and code clarity.

3

Using callbacks to update state can cause stale closures; understanding React hooks rules is essential to avoid bugs.

When NOT to use

Avoid lifting state up when the shared data is needed deeply in many components across the app. Instead, use Context API or state management libraries like Redux or Recoil to avoid prop drilling and improve scalability.

Production Patterns

In real apps, lifting state up is used for small to medium shared data like form inputs or toggles. For larger apps, it is combined with Context or Redux. Developers also memoize components and use React.memo to optimize rendering when lifting state.

Connections

Unidirectional Data Flow

Lifting state up enforces unidirectional data flow from parent to child.

Understanding lifting state up clarifies how React keeps UI predictable by controlling data direction.

Centralized State Management

Lifting state up is a simple form of centralizing state before using advanced tools.

Knowing lifting state up helps grasp why tools like Redux centralize app state for complex apps.

Shared Calendar Scheduling

Both involve a single source of truth shared among multiple users/components.

Seeing lifting state up like a shared calendar helps understand why one place must hold shared info.

Common Pitfalls

#1 Trying to update props directly inside a child component.

Wrong approach:

const Child = ({text}) => {
text = 'new'; // wrong: props are read-only
return {text};
};

Correct approach:

const Child = ({text, setText}) => {
return

Root cause:

Misunderstanding that props are immutable and state updates must happen in the parent.

#2 Lifting state too high causing prop drilling through many components.

Wrong approach:

Parent holds state and passes it through 5 layers of components that don't use it, just to reach a deep child.

Correct approach:

Use Context API or state management libraries to provide state directly to deep children without intermediate props.

Root cause:

Not recognizing when lifting state up becomes unmanageable and when to use better tools.

#3 Updating lifted state causes all children to re-render unnecessarily.

Wrong approach:

Parent holds one big state object; any change triggers re-render of all children even if they don't use changed data.

Correct approach:

Split state into smaller pieces or memoize children with React.memo to avoid unnecessary re-renders.

Root cause:

Not optimizing rendering when using lifted state in complex components.

Key Takeaways

Lifting state up means moving shared data to the nearest common parent to keep components in sync.

Props pass data down; callbacks let children request state changes in the parent.

Without lifting state up, sibling components can have conflicting data causing bugs.

Lifting state up enforces React's unidirectional data flow and a single source of truth.

Be mindful of prop drilling and performance impacts; use advanced tools when apps grow complex.

Practice

1. What is the main purpose of lifting state up in React Native?

easy

A. To create multiple independent states in child components

B. To move shared state to a common parent component so children can access it

C. To store state only inside child components without sharing

D. To avoid using props for data sharing between components

Solution

1. Step 1: Understand the concept of shared state

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

2. Step 2: Identify the purpose of lifting state up

   This helps keep data consistent and allows children to communicate through the parent.

3. Final Answer:

   To move shared state to a common parent component so children can access it -> Option B

4. Quick Check:

   Lifting state up = shared parent state [OK]

Hint: Shared data lives in parent to sync children easily [OK]

Common Mistakes:

• Thinking each child should have its own separate state
• Believing lifting state up removes the need for props
• Confusing lifting state up with component styling

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify what to pass as prop

   The parent passes a function to update state, not the state value or setState method directly.

2. Step 2: Choose the correct syntax

   Passing updateStateFunction as a prop is correct to allow child to call it.

3. Final Answer:

   <Child updateState={updateStateFunction} /> -> Option C

4. Quick Check:

   Pass update function as prop = <Child updateState={updateStateFunction} /> [OK]

Hint: Pass functions, not state or setState directly [OK]

Common Mistakes:

• Passing the entire state object instead of a function
• Passing setState method directly without binding
• Passing state value instead of update function

3. Given the code below, what will be the output when the button in Child is pressed?

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <Child count={count} increment={() => setCount(count + 1)} />
      <Text>Count: {count}</Text>
    </>
  );
}

function Child({ count, increment }) {
  return <Button title={`Add`} onPress={increment} />;
}

medium

A. The app will crash due to incorrect state update

B. The count will always stay 0 regardless of button presses

C. The button will not respond to presses

D. The count displayed will increase by 1 each time the button is pressed

Solution

1. Step 1: Understand state and props flow

   The Parent holds the count state and passes it plus an increment function to Child.

2. Step 2: Analyze what happens on button press

   Pressing the button calls increment, which updates count by adding 1.

3. Final Answer:

   The count displayed will increase by 1 each time the button is pressed -> Option D

4. Quick Check:

   State update via lifted function increments count [OK]

Hint: Button calls parent's update function to increase count [OK]

Common Mistakes:

• Thinking count won't update because it's passed as prop
• Assuming setCount is not called correctly
• Confusing local and lifted state

4. Identify the error in this lifting state up example:

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

function Child({ text, setText }) {
  return <TextInput value={text} onChangeText={setText} />;
}

medium

A. setText is called immediately instead of passing the function

B. text state is not initialized properly

C. Child component should not receive setText as prop

D. TextInput should not use onChangeText prop

Solution

1. Step 1: Check how setText is passed as prop

   In Parent, setText={setText()} calls setText immediately instead of passing the function.

2. Step 2: Correct way to pass setText

   It should be setText={setText} to pass the function reference.

3. Final Answer:

   setText is called immediately instead of passing the function -> Option A

4. Quick Check:

   Pass function reference, not call it [OK]

Hint: Pass function, don't call it when passing as prop [OK]

Common Mistakes:

• Calling setState function instead of passing it
• Confusing state value with update function
• Ignoring React hooks rules

5. You have two sibling components, TemperatureInputCelsius and TemperatureInputFahrenheit, that need to share temperature data. How should you use lifting state up to keep both inputs in sync?

hard

A. Move the temperature state to their common parent and pass value and update functions as props

B. Keep separate states in each sibling and update independently

C. Store temperature state only in one sibling and let the other read it directly

D. Use global variables outside React components to share temperature

Solution

1. Step 1: Identify the need for shared state

   Both siblings need to reflect the same temperature, so state must be shared.

2. Step 2: Apply lifting state up

   Move temperature state to their common parent and pass it plus update functions down as props.

3. Step 3: Avoid incorrect approaches

   Separate states cause inconsistency; global variables break React's data flow.

4. Final Answer:

   Move the temperature state to their common parent and pass value and update functions as props -> Option A

5. Quick Check:

   Lift shared state to parent for syncing siblings [OK]

Hint: Parent holds shared state; siblings get props and update functions [OK]

Common Mistakes:

• Keeping separate states causing out-of-sync inputs
• Trying to share state via global variables
• Passing state only to one sibling