React Context API: Global State Management

import { createContext } from 'react';

// The argument to createContext is the DEFAULT value —
// used only when a component has no matching Provider above it.
// null is a common default when a Provider is always required.
const UserContext = createContext(null);

export default UserContext;

import { useState, useEffect } from 'react';
import UserContext from './context/UserContext';
import Layout from './components/Layout';

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchCurrentUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;

  // value prop is what consumers will receive
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  );
}

export default App;

import { useContext } from 'react';
import UserContext from '../context/UserContext';

function UserCard() {
  // Reads from the nearest matching Provider above in the tree
  const { user } = useContext(UserContext);

  if (!user) return null;

  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

export default UserCard;

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

// 1. Create the context (not exported directly)
const AuthContext = createContext(null);

// 2. Build the Provider component with all state logic
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(() => localStorage.getItem('token'));

  useEffect(() => {
    if (token) {
      validateToken(token)
        .then(userData => setUser(userData))
        .catch(() => {
          localStorage.removeItem('token');
          setToken(null);
        });
    }
  }, [token]);

  const login = async (email, password) => {
    const { user: userData, token: newToken } = await apiLogin(email, password);
    localStorage.setItem('token', newToken);
    setToken(newToken);
    setUser(userData);
  };

  const logout = () => {
    localStorage.removeItem('token');
    setToken(null);
    setUser(null);
  };

  const value = { user, token, login, logout, isAuthenticated: !!user };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// 3. Custom hook — the only way consumers should access this context
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

import { useAuth } from '../context/AuthContext';
import { Link } from 'react-router-dom';

function Navbar() {
  const { user, logout, isAuthenticated } = useAuth();

  return (
    <nav>
      <Link to="/">Home</Link>
      {isAuthenticated ? (
        <>
          <span>Welcome, {user.name}!</span>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <Link to="/login">Login</Link>
      )}
    </nav>
  );
}

export default Navbar;

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

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    // Read from localStorage on first render, fall back to system preference
    const saved = localStorage.getItem('theme');
    if (saved) return saved;
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  });

  useEffect(() => {
    // Apply theme to the document root
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () =>
    setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));

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

export const useTheme = () => {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
};

import { useTheme } from '../context/ThemeContext';

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme} aria-label="Toggle theme">
      {theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode'}
    </button>
  );
}

export default ThemeToggle;

// BAD: one context for everything — all consumers re-render on any change
const AppContext = createContext({ user, theme, cart, notifications });

// GOOD: separate contexts — components only subscribe to what they use
const UserContext = createContext(null);        // Changes rarely
const ThemeContext = createContext(null);       // Changes on user toggle
const CartContext = createContext(null);        // Changes frequently
const NotificationsContext = createContext(null); // Changes on events

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

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);

  const addItem = (product) =>
    setItems(prev => [...prev, product]);

  const removeItem = (id) =>
    setItems(prev => prev.filter(item => item.id !== id));

  const total = items.reduce((sum, item) => sum + item.price, 0);

  // Without useMemo, { items, addItem, removeItem, total } is a new
  // object reference on every render, re-rendering all consumers.
  const value = useMemo(
    () => ({ items, addItem, removeItem, total }),
    [items] // Only recreate when items actually changes
  );

  return (
    <CartContext.Provider value={value}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

import { createContext, useContext, useReducer } from 'react';

const CountStateContext = createContext(null);
const CountDispatchContext = createContext(null);

function countReducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset':     return { count: 0 };
    default: throw new Error(`Unknown action: ${action.type}`);
  }
}

export function CountProvider({ children }) {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });

  return (
    <CountStateContext.Provider value={state}>
      <CountDispatchContext.Provider value={dispatch}>
        {children}
      </CountDispatchContext.Provider>
    </CountStateContext.Provider>
  );
}

// Components that display count — re-render when count changes
export const useCountState = () => useContext(CountStateContext);

// Components that only dispatch — never re-render due to count changes
export const useCountDispatch = () => useContext(CountDispatchContext);

// Usage in a display component:
function Counter() {
  const { count } = useCountState();
  return <h1>Count: {count}</h1>;
}

// Usage in a button component — won't re-render when count changes!
function IncrementButton() {
  const dispatch = useCountDispatch();
  return <button onClick={() => dispatch({ type: 'increment' })}>+</button>;
}

import { AuthProvider } from '../context/AuthContext';
import { ThemeProvider } from '../context/ThemeContext';
import { CartProvider } from '../context/CartContext';
import { NotificationsProvider } from '../context/NotificationsContext';

// Compose providers into a single wrapper — order matters!
// Outer providers are available to inner providers.
export function AppProviders({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <NotificationsProvider>
          <CartProvider>
            {children}
          </CartProvider>
        </NotificationsProvider>
      </AuthProvider>
    </ThemeProvider>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { AppProviders } from './providers/AppProviders';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <AppProviders>
        <App />
      </AppProviders>
    </BrowserRouter>
  </React.StrictMode>
);

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AuthProvider } from '../../context/AuthContext';
import UserCard from '../UserCard';

// Helper: render with providers
function renderWithAuth(ui, { user = null } = {}) {
  return render(
    <AuthContext.Provider value={{ user, isAuthenticated: !!user }}>
      {ui}
    </AuthContext.Provider>
  );
}

describe('UserCard', () => {
  test('renders user name and email when authenticated', () => {
    const mockUser = { name: 'Mayur Dabhi', email: 'mayur@example.com' };
    renderWithAuth(<UserCard />, { user: mockUser });

    expect(screen.getByText('Mayur Dabhi')).toBeInTheDocument();
    expect(screen.getByText('mayur@example.com')).toBeInTheDocument();
  });

  test('renders nothing when user is null', () => {
    const { container } = renderWithAuth(<UserCard />, { user: null });
    expect(container).toBeEmptyDOMElement();
  });
});