Why global state avoids prop drilling in React Native - Build It to Prove It

Build: Global State Demo

This screen shows how using global state helps avoid passing data through many layers of components (prop drilling).

Target UI

-------------------------
| Global State Demo      |
|-----------------------|
| User Name: [Alice]    |
|                       |
| [Change Name Button]  |
-------------------------

Display a user name stored in global state

Show the user name in a deeply nested child component without passing it through intermediate components

Add a button to change the user name globally

Use React Context API for global state management

Starter Code

React Native

import React, { createContext, useState } from 'react';
import { View, Text, Button } from 'react-native';

const UserContext = createContext();

function DeepChild() {
  // TODO: Access user name from global state here
  return (
    <View>
      <Text>User Name: {/* Show user name here */}</Text>
    </View>
  );
}

function MiddleChild() {
  return <DeepChild />;
}

export default function App() {
  const [userName, setUserName] = useState('Alice');

  // TODO: Provide userName and setUserName via UserContext.Provider

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20, marginBottom: 10 }}>Global State Demo</Text>
      <MiddleChild />
      {/* TODO: Add button to change user name here */}
    </View>
  );
}

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React, { createContext, useState, useContext } from 'react';
import { View, Text, Button } from 'react-native';

const UserContext = createContext();

function DeepChild() {
  const { userName } = useContext(UserContext);
  return (
    <View>
      <Text>User Name: {userName}</Text>
    </View>
  );
}

function MiddleChild() {
  return <DeepChild />;
}

export default function App() {
  const [userName, setUserName] = useState('Alice');

  return (
    <UserContext.Provider value={{ userName, setUserName }}>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 20, marginBottom: 10 }}>Global State Demo</Text>
        <MiddleChild />
        <Button
          title="Change Name"
          onPress={() => setUserName(userName === 'Alice' ? 'Bob' : 'Alice')}
          accessibilityLabel="Change user name button"
        />
      </View>
    </UserContext.Provider>
  );
}

We use React's Context API to create a global state called UserContext. The App component holds the userName state and provides it to all child components via UserContext.Provider. The DeepChild component accesses the userName directly from the context using useContext, so it does not need to receive it as a prop from MiddleChild or App. This avoids prop drilling, which means passing props through many layers just to reach a deeply nested component. The button in App changes the global userName, and the change is reflected immediately in DeepChild because it reads from the shared global state.

This approach keeps the code clean and easy to maintain, especially when many components need access to the same data.

Final Result

Completed Screen

-------------------------
| Global State Demo      |
|-----------------------|
| User Name: Alice      |
|                       |
| [Change Name Button]  |
-------------------------

When user taps 'Change Name' button, the name toggles between 'Alice' and 'Bob' globally.

The displayed user name updates instantly without passing props through intermediate components.

Stretch Goal

Add a toggle to switch between light and dark mode for the screen.

💡 Hint

Use React state to track mode and change background and text colors accordingly.

Practice

1. Why is using global state preferred over prop drilling in React Native apps?

easy

A. Because global state requires more code to pass data

B. Because prop drilling improves performance by passing props deeply

C. Because prop drilling avoids using any state management

D. Because global state allows direct data sharing without passing props through many components

Solution

1. Step 1: Understand prop drilling

   Prop drilling means passing data through many layers of components even if intermediate ones don't need it.

2. Step 2: Understand global state benefits

   Global state shares data directly with any component that needs it, avoiding unnecessary prop passing.

3. Final Answer:

   Because global state allows direct data sharing without passing props through many components -> Option D

4. Quick Check:

   Global state avoids prop drilling = C [OK]

Hint: Global state shares data directly, skipping intermediate props [OK]

Common Mistakes:

• Thinking prop drilling improves performance
• Believing global state requires more code
• Confusing prop drilling with avoiding state

2. Which of the following is the correct way to access global state using React Context in React Native?

easy

A. const value = useReducer(MyContext);

B. const value = useState(MyContext);

C. const value = useContext(MyContext);

D. const value = useEffect(MyContext);

Solution

1. Step 1: Recall React Context usage

   To access global state via React Context, useContext hook is used with the context object.

2. Step 2: Identify correct hook

   useState manages local state, useEffect manages side effects, useReducer manages complex state logic, but none access context directly.

3. Final Answer:

   const value = useContext(MyContext); -> Option C

4. Quick Check:

   Access context with useContext = D [OK]

Hint: Use useContext to read global state from context [OK]

Common Mistakes:

• Using useState instead of useContext for context
• Confusing useEffect with state access
• Trying to use useReducer directly for context

3. Given this React Native code snippet using global state, what will be the output when the button is pressed?

const CountContext = React.createContext(0);

function Display() {
  const count = React.useContext(CountContext);
  return {count};
}

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

medium

A. The displayed number stays 0 always

B. The displayed number increases by 1 each button press

C. The app crashes due to missing context

D. The button does not respond to presses

Solution

1. Step 1: Understand context and state connection

   The count state is provided via CountContext.Provider and updated on button press.

2. Step 2: Trace button press effect

   Pressing the button calls setCount(count + 1), updating count and re-rendering Display with new value.

3. Final Answer:

   The displayed number increases by 1 each button press -> Option B

4. Quick Check:

   Context updates with state changes = B [OK]

Hint: State update triggers context value change and re-render [OK]

Common Mistakes:

• Assuming context value never changes
• Thinking button does not update state
• Believing app crashes without provider

4. Identify the bug in this React Native code that tries to use global state but still requires prop drilling:

const UserContext = React.createContext();

function Profile({ user }) {
  return {user.name};
}

function App() {
  const user = { name: 'Anna' };
  return (
    
      
    
  );
}

medium

A. Profile component should use useContext(UserContext) instead of props

B. UserContext.Provider is missing a value prop

C. User object is not defined

D. Profile component should be a class component

Solution

1. Step 1: Check how Profile receives data

   Profile expects a user prop but is rendered without props, causing undefined user.

2. Step 2: Use context to avoid prop drilling

   Profile should use useContext(UserContext) to get user directly from global state.

3. Final Answer:

   Profile component should use useContext(UserContext) instead of props -> Option A

4. Quick Check:

   Use context hook to avoid prop drilling = A [OK]

Hint: Use useContext inside components to get global state [OK]

Common Mistakes:

• Forgetting to use useContext in child components
• Assuming Provider needs no value prop
• Thinking class components are required

5. You have a React Native app with deeply nested components needing the same user data. Which approach best avoids prop drilling and keeps code clean?

hard

A. Use React Context to create a global user state and access it with useContext in any component

B. Pass user data as props through every nested component manually

C. Store user data in local component state of the top-level component only

D. Use multiple useState hooks in each nested component to hold user data

Solution

1. Step 1: Understand prop drilling problem

   Passing props through many nested components is tedious and error-prone.

2. Step 2: Use global state with React Context

   React Context allows sharing user data globally, so any component can access it directly without prop passing.

3. Final Answer:

   Use React Context to create a global user state and access it with useContext in any component -> Option A

4. Quick Check:

   Global state with context avoids prop drilling = A [OK]

Hint: React Context shares data globally, no prop passing needed [OK]

Common Mistakes:

• Passing props through every nested component
• Using local state only at top level
• Duplicating state in nested components