Context API State Management in React: 3 Examples

Introduction to Context API in React

The Context API in React is a powerful feature that allows you to share state across your entire application without having to pass props down manually at every level. This is especially useful for global state management, where multiple components need access to the same data. In this article, we will explore three diverse examples of using Context API for state management in React that will help clarify how it works.

Example 1: Theme Toggle with Context API

Use Case: This example demonstrates how to create a simple theme toggle feature that allows users to switch between light and dark modes across the application.

In this example, we will create a ThemeContext that stores the current theme and a function to toggle it. Multiple components can consume this context and react accordingly.

import React, { createContext, useState, useContext } from 'react';

// Create a Context for the theme
const ThemeContext = createContext();

// Create a provider component
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Custom hook to use theme context
const useTheme = () => useContext(ThemeContext);

// Example component
const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme} style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    </button>
  );
};

// Main App
const App = () => {
  return (
    <ThemeProvider>
      <h1>Hello, World!</h1>
      <ThemeToggleButton />
    </ThemeProvider>
  );
};

export default App;

Notes: You can enhance this example by persisting the theme choice using local storage so that it remains consistent even after a page refresh.

Example 2: User Authentication Context

Use Case: In this example, we will create a context to manage user authentication status throughout the application. This can be useful for applications that require user login and provide access to certain components based on authentication status.

Here, we will set up a AuthContext that includes user data and functions to log in and log out.

import React, { createContext, useState, useContext } from 'react';

// Create a Context for user authentication
const AuthContext = createContext();

// Create a provider component
const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// Custom hook to use auth context
const useAuth = () => useContext(AuthContext);

// Example component
const UserProfile = () => {
  const { user, logout } = useAuth();

  return user ? (
    <div>
      <h2>Welcome, {user.name}!</h2>
      <button onClick={logout}>Log Out</button>
    </div>
  ) : (
    <h2>Please log in.</h2>
  );
};

// Main App
const App = () => {
  const { login } = useAuth();

  return (
    <AuthProvider>
      <UserProfile />
      <button onClick={() => login({ name: 'John Doe' })}>Log In</button>
    </AuthProvider>
  );
};

export default App;

Notes: Consider adding error handling and loading states when implementing a real authentication system with APIs.

Example 3: Cart Management in E-commerce App

Use Case: This example illustrates how to manage a shopping cart’s state in a simple e-commerce application using the Context API. Users can add and remove items from the cart, and the cart’s state is accessible from anywhere within the app.

We will create a CartContext that stores the cart items and provides functions to manipulate the cart.

import React, { createContext, useState, useContext } from 'react';

// Create a Context for the cart
const CartContext = createContext();

// Create a provider component
const CartProvider = ({ children }) => {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (item) => {
    setCartItems((prevItems) => [...prevItems, item]);
  };

  const removeFromCart = (item) => {
    setCartItems((prevItems) => prevItems.filter(i => i.id !== item.id));
  };

  return (
    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
};

// Custom hook to use cart context
const useCart = () => useContext(CartContext);

// Example component
const Cart = () => {
  const { cartItems, removeFromCart } = useCart();

  return (
    <div>
      <h2>Your Shopping Cart</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.id}>
            {item.name} <button onClick={() => removeFromCart(item)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

// Main App
const App = () => {
  const { addToCart } = useCart();
  const sampleItem = { id: 1, name: 'Sample Product' };

  return (
    <CartProvider>
      <Cart />
      <button onClick={() => addToCart(sampleItem)}>Add Sample Product to Cart</button>
    </CartProvider>
  );
};

export default App;

Notes: You can expand this example by integrating a total price calculation and persisting the cart in local storage for a seamless shopping experience.