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.