Skip to main content
React Native Introduction
CHAPTER 16 Beginner

State Management with Context API

Updated: May 16, 2026
6 min read

# CHAPTER 16

State Management with Context API

1. Introduction

In Chapter 7, we learned to pass data downwards using Props. This works perfectly for a Parent and a Child. But what if you have a ShoppingCart array, and both the HomeTab and the CheckoutTab need to read it and update it? Passing props up and down through 15 layers of nested navigation screens is an architectural nightmare known as "Prop Drilling." To solve this, we must lift the data out of the UI tree entirely and place it into a global "Cloud." In this chapter, we will master State Management with the Context API. Built directly into React, Context allows us to create global data providers and effortlessly tap into that data from any screen in the application.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Identify the "Prop Drilling" anti-pattern.
  • Create a global Context object.
  • Build a custom Context Provider component holding shared state.
  • Wrap the root of your application in the Provider.
  • Access the global state deep within the app using the useContext hook.

3. The Prop Drilling Problem

Imagine an App structure: App -> TabNav -> SettingsStack -> SettingsScreen -> ThemeToggle. If the Dark Mode toggle logic lives in App.js, you have to pass isDarkMode and toggleTheme() as props through 4 intermediate screens that don't care about the theme at all, just to get it to the ThemeToggle button. This clutters the code and degrades performance.

4. Step 1: Create the Context (The Cloud)

First, we create an empty Context object. This is the definition of our "Cloud".
ThemeContext.js
1234 
import { createContext } from 'react';

// Create an empty Context object and export it
export const ThemeContext = createContext();

5. Step 2: Create the Provider (The Engine)

Next, we build a regular component whose sole job is to hold the useState variables and wrap its children (the rest of the app) inside the Context Provider.
ThemeContext.js
123456789101112131415161718192021 
import React, { useState, createContext } from 'react';

export const ThemeContext = createContext();

// Create the Provider Component
export const ThemeProvider = ({ children }) => {
  // 1. The Global State!
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 2. The Global Functions!
  const toggleTheme = () => {
    setIsDarkMode(prevMode => !prevMode);
  };

  return (
    // 3. The 'value' prop contains the actual data the rest of the app can read!
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

6. Step 3: Wrap the App

For the app to access the Cloud, the Cloud must sit at the absolute top of the component tree. Open App.js and wrap your NavigationContainer!
App.js
1234567891011 
import { ThemeProvider } from &#039;./ThemeContext&#039;;

export default function App() {
  return (
    <ThemeProvider> {/* Wrap the whole app! */}
      <NavigationContainer>
        {/* Your Stacks and Tabs go here */}
      </NavigationContainer>
    </ThemeProvider>
  );
}

7. Step 4: Consume the Data (useContext)

Now, open ANY screen deeply nested in your app. You don't need props anymore. Just use the useContext hook to reach up into the Cloud and grab exactly what you need!
SettingsScreen.js
12345678910111213141516171819202122232425 
import React, { useContext } from &#039;react&#039;;
import { View, Text, Switch } from &#039;react-native&#039;;
import { ThemeContext } from &#039;./ThemeContext&#039;; // Import the Cloud definition!

export default function SettingsScreen() {
  
  // REACH INTO THE CLOUD! Destructure exactly what you need.
  const { isDarkMode, toggleTheme } = useContext(ThemeContext);

  return (
    <View style={{ flex: 1, backgroundColor: isDarkMode ? &#039;#333&#039; : &#039;#FFF&#039; }}>
      
      <Text style={{ color: isDarkMode ? &#039;#FFF&#039; : &#039;#000&#039; }}>
        Current Theme: {isDarkMode ? &#039;Dark&#039; : &#039;Light&#039;}
      </Text>
      
      {/* Trigger the global function! */}
      <Switch 
        value={isDarkMode} 
        onValueChange={toggleTheme} 
      />
      
    </View>
  );
}

*Magic: When the Switch is flipped, toggleTheme runs in the Provider. isDarkMode state changes to true. The Provider alerts EVERY screen that is currently using useContext(ThemeContext) to instantly redraw themselves in Dark Mode!*

8. Visual Learning: The Context Architecture

txt
1234567 
             [ ThemeProvider ] (Holds State: isDarkMode)
                    |
          [ NavigationContainer ] (Ignored)
             /                 \
       [ FeedScreen ]      [ SettingsScreen ]
       (useContext)          (useContext)
      Reads &#039;isDarkMode'     Triggers 'toggleTheme'

9. Common Mistakes

  • Forgetting to Export the Context: You must export TWO things from your Context file: The ThemeContext object itself (so screens can use useContext), AND the ThemeProvider component (so App.js can wrap the app). If you forget the first one, the app crashes when a screen tries to connect.

10. Best Practices

  • Split your Contexts: Do not put Authentication state, Shopping Cart state, and Theme state all into one giant GlobalContext. Every time the theme toggles, the Shopping Cart components will needlessly re-render. Create a separate AuthContext, CartContext, and ThemeContext to isolate rendering performance!

11. Practice Exercises

  1. 1. What built-in React Hook is used to extract data from a Context Provider deep within the UI tree?
  1. 2. What specific prop on the <Context.Provider> wrapper component is responsible for holding the object containing the state and functions you wish to share?

12. MCQs with Answers

Question 1

What is the definition of "Prop Drilling"?

Question 2

In a large React Native application with multiple distinct domains (User Auth, Shopping Cart, UI Theme), why is it considered a best practice to create multiple, separate Context Providers rather than one massive Global Provider?

13. Interview Questions

  • Q: Explain the mechanical flow of the Context API. How does a state change inside the Provider component physically trigger a re-render in a deeply nested consumer component?
  • Q: Contrast Prop Drilling with the Context API. In what specific scenario is standard prop passing preferred over utilizing Context?
  • Q: Explain the necessity of the children prop within the custom Provider component. What happens to the application UI if {children} is omitted from the Provider's return statement?

14. FAQs

Q: Is Context better than Redux? A: Context is not a state management tool; it is a *dependency injection* tool. It is perfect for low-frequency updates (like Auth Status or Theme Toggles). For high-frequency, complex state management (like real-time chat data or massive e-commerce logic), Redux Toolkit is heavily preferred for its performance optimizations. We learn Redux next!

15. Summary

In Chapter 16, we solved the architectural nightmare of Prop Drilling. We utilized the native React Context API to construct an independent "Cloud" of data. We initialized a global createContext object, managed shared data and logic within a custom Provider, and wrapped our application root to broadcast that data globally. Deep within our component tree, we utilized the powerful useContext hook to extract and modify this global state, achieving a clean, scalable architecture.

16. Next Chapter Recommendation

Context is excellent for simple data, but enterprise applications demand a more robust, traceable, and performance-optimized architecture. Proceed to Chapter 17: Redux Toolkit for React Native.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter React Native Screens and Routing
Next Chapter Redux Toolkit for React Native

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5