React Context for Global State

1. What is React Context?

React Context is a mechanism designed to solve the problem of prop drilling. It allows you to create a central "store" of data that any component within a certain part of your application can access directly, without needing props passed down to it.

Conceptually, this is similar to how a service container works in Laravel. You "register" a service (or in our case, state) in a central place, and then you can "resolve" (or access) it from anywhere in your application that needs it.

The process of using Context involves three main steps:

1. Create a Context object.
2. Provide the Context by wrapping a part of your component tree with a special Provider component.
3. Consume the Context in any child component that needs the data.

Today, we will focus on the first two steps: creating and providing.

2. Step 1: Creating the Context

The first step is to create a Context object using React's createContext function. By convention, you'll often do this in a dedicated file.

Let's imagine we're building the shopping cart for our e-commerce app.

1. Create a new folder in your src directory called context.
2. Inside src/context, create a file named CartContext.js.

In this new file, you create the context:

import { createContext } from 'react';

// Create the context
const CartContext = createContext();

export default CartContext;

That's it. createContext() returns a context object that contains two components: a Provider and a Consumer. We'll focus on the Provider.

3. Step 2: Creating a Provider Component

While you could use CartContext.Provider directly in your App.js file, a much more powerful and common pattern is to create a custom wrapper component that manages the state and provides it. This custom component will contain all the state, logic, and functions related to our context.

This provider component will:

• Hold the state (using useState or, as we'll see later, useReducer).
• Define functions to update that state (e.g., addToCart, removeFromCart).
• Wrap its children with the actual <CartContext.Provider> component, passing the state and functions down through the value prop.

The following video is a fantastic, practical guide to this process. The presenter refactors a blog application, but the pattern is exactly what we need for any global state.

Following this pattern, our CartContext.js file would look something like this:

import { createContext, useState } from 'react';

// 1. Create the context
const CartContext = createContext();

// 2. Create the Provider component
export const CartProvider = ({ children }) => {
  // State for the cart will live here
  const [cartItems, setCartItems] = useState([]);
  
  // Functions to modify the cart will live here
  const addToCart = (item) => {
    // Logic to add item to cartItems
  };

  return (
    // 3. Provide the state and functions to children
    <CartContext.Provider value={{ cartItems, addToCart }}>
      {children}
    </CartContext.Provider>
  );
};

export default CartContext;

Everything passed into the value prop will be made available to any component that consumes this context.

4. Step 3: Providing the Context to the App

Now that we have our CartProvider, we need to wrap it around the components that will need access to the cart. For a shopping cart, this is typically the entire application. You do this in your main App.js (or main.jsx/index.js) file.

In App.js, it would look like this:

import { CartProvider } from './context/CartContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import ProductPage from './pages/ProductPage';
import CartPage from './pages/CartPage';

function App() {
  return (
    <Router>
      {/* Wrap the entire app in the CartProvider */}
      <CartProvider>
        <Header />
        <Routes>
          <Route path="/" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
        </Routes>
      </CartProvider>
    </Router>
  );
}

Now, the Header, ProductPage, CartPage, and any of their children can access the cartItems and addToCart function without any prop drilling.

5. Best Practice: What Belongs in Context?

It can be tempting to put all your application's state into a context, but this is an anti-pattern. Global state should be reserved for data that is genuinely global. Putting local state (like the text in a form input) into a global context can cause performance issues, as components will re-render unnecessarily when unrelated parts of the global state change.

A good rule of thumb:

• Use Context for: State that needs to be accessed and updated by many different components at different levels of the tree.
  • Good examples: User authentication status, shopping cart contents, theme (light/dark mode).
• Use local component state (useState / useReducer) for: State that is only relevant to a single component or its direct children.
  • Good examples: Whether a modal is open, the value of a form input, data fetched for a specific page.

This final video clip is extremely valuable. The presenter refactors his code to move component-specific logic out of the global context, making his application more efficient and better organized.

This discipline of separating global and local state is a hallmark of a skilled React developer and aligns with the clean architectural patterns you're used to in backend development.

Conclusion

Today you've learned the fundamental pattern for creating shared, global state in React, effectively eliminating the problem of "prop drilling."

Key Takeaways:

• React Context provides a way to pass data through the component tree without having to pass props down manually at every level.
• The process involves Creating the context with createContext(), and Providing it with a <Context.Provider value={...}> component.
• A common pattern is to create a custom Provider component (e.g., CartProvider) that encapsulates the state and logic.
• Only truly global state should be placed in a context to maintain performance and code organization.

Preview of the Next Lesson:

We've successfully created and provided our global state. But how do our components actually get that data? In the next lesson, we'll cover the final step: consuming the context using the useContext hook. We will then combine what you learned about useReducer with what you learned today to build a powerful and scalable state management solution for our e-commerce app's shopping cart.