Context API and Global State

Basic Context Creation and Usage

// 1. Create a Context
import React, { createContext, useContext, useState } from 'react';

// Create a Context with a default value
const ThemeContext = createContext('light');

// 2. Create a Provider Component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  // Toggle theme function
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  // The value that will be provided to consumers
  const value = {
    theme,
    toggleTheme
  };
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Create a custom hook for consuming the context
function useTheme() {
  const context = useContext(ThemeContext);
  
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  
  return context;
}

// 4. Using the Context in components
function App() {
  return (
    <ThemeProvider>
      <Header />
      <MainContent />
      <Footer />
    </ThemeProvider>
  );
}

function Header() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header className={`header ${theme}`}>
      <h1>My App</h1>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'dark' : 'light'} theme
      </button>
    </header>
  );
}

function MainContent() {
  // This component doesn't need the theme
  return (
    <main>
      <Content />
    </main>
  );
}

function Content() {
  const { theme } = useTheme();
  
  return (
    <div className={`content ${theme}`}>
      <p>This content is using the {theme} theme.</p>
    </div>
  );
}

function Footer() {
  const { theme } = useTheme();
  
  return (
    <footer className={`footer ${theme}`}>
      <p>© 2023 My App</p>
    </footer>
  );
}

export { ThemeProvider, useTheme };
                

This example demonstrates the basic pattern for creating and using Context in React. Note how the MainContent component doesn't use the theme but its child (Content) can still access it directly through the Context, avoiding prop drilling.

Using Multiple Contexts

// UserContext.js
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  
  const login = (userData) => {
    setUser(userData);
  };
  
  const logout = () => {
    setUser(null);
  };
  
  const value = {
    user,
    login,
    logout,
    isAuthenticated: !!user
  };
  
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

function useUser() {
  const context = useContext(UserContext);
  
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  
  return context;
}

export { UserProvider, useUser };

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import { UserProvider } from './UserContext';
import Dashboard from './Dashboard';
import LoginPage from './LoginPage';

function App() {
  return (
    // Nesting contexts is perfectly fine
    <ThemeProvider>
      <UserProvider>
        <AppContent />
      </UserProvider>
    </ThemeProvider>
  );
}

function AppContent() {
  const { isAuthenticated } = useUser();
  
  return (
    <div className="app">
      {isAuthenticated ? <Dashboard /> : <LoginPage />}
    </div>
  );
}

// LoginPage.js
function LoginPage() {
  const { login } = useUser();
  const { theme } = useTheme();
  
  const handleLogin = () => {
    // In a real app, you'd validate credentials
    login({
      id: 1,
      name: 'John Doe',
      email: 'john@example.com',
      role: 'admin'
    });
  };
  
  return (
    <div className={`login-page ${theme}`}>
      <h2>Login</h2>
      {/* Login form would go here */}
      <button onClick={handleLogin}>Login as John</button>
    </div>
  );
}

// UserProfile.js
function UserProfile() {
  const { user, logout } = useUser();
  const { theme } = useTheme();
  
  if (!user) return null;
  
  return (
    <div className={`user-profile ${theme}`}>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Role: {user.role}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}
                

This example shows how to use multiple contexts together. Components can consume as many contexts as they need, and contexts can be nested to provide hierarchical data.

Context with Reducer for Complex State

// AppContext.js
import React, { createContext, useContext, useReducer } from 'react';

// Define initial state
const initialState = {
  theme: 'light',
  user: null,
  notifications: [],
  sidebarOpen: false
};

// Create reducer function
function appReducer(state, action) {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light'
      };
    case 'LOGIN':
      return {
        ...state,
        user: action.payload
      };
    case 'LOGOUT':
      return {
        ...state,
        user: null
      };
    case 'ADD_NOTIFICATION':
      return {
        ...state,
        notifications: [...state.notifications, action.payload]
      };
    case 'REMOVE_NOTIFICATION':
      return {
        ...state,
        notifications: state.notifications.filter(
          notification => notification.id !== action.payload
        )
      };
    case 'TOGGLE_SIDEBAR':
      return {
        ...state,
        sidebarOpen: !state.sidebarOpen
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// Create context
const AppContext = createContext();

// Create provider
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);
  
  // Create convenience methods for common actions
  const value = {
    ...state,
    dispatch,
    toggleTheme: () => dispatch({ type: 'TOGGLE_THEME' }),
    login: (userData) => dispatch({ type: 'LOGIN', payload: userData }),
    logout: () => dispatch({ type: 'LOGOUT' }),
    addNotification: (notification) => {
      const id = Date.now();
      dispatch({
        type: 'ADD_NOTIFICATION',
        payload: { ...notification, id }
      });
      
      // Auto-remove notification after a delay
      setTimeout(() => {
        dispatch({ type: 'REMOVE_NOTIFICATION', payload: id });
      }, notification.duration || 3000);
    },
    toggleSidebar: () => dispatch({ type: 'TOGGLE_SIDEBAR' })
  };
  
  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

// Create hook for using the context
function useApp() {
  const context = useContext(AppContext);
  
  if (context === undefined) {
    throw new Error('useApp must be used within an AppProvider');
  }
  
  return context;
}

export { AppProvider, useApp };

// Usage in components
function Header() {
  const { theme, toggleTheme, user, toggleSidebar } = useApp();
  
  return (
    <header className={`header ${theme}`}>
      <button onClick={toggleSidebar}>
        ☰
      </button>
      <h1>My App</h1>
      
      <div className="header-actions">
        {user ? (
          <span>Welcome, {user.name}</span>
        ) : (
          <button>Login</button>
        )}
        
        <button onClick={toggleTheme}>
          {theme === 'light' ? '🌙' : '☀️'}
        </button>
      </div>
    </header>
  );
}

function NotificationCenter() {
  const { notifications } = useApp();
  
  return (
    <div className="notifications">
      {notifications.map(notification => (
        <div
          key={notification.id}
          className={`notification ${notification.type || 'info'}`}
        >
          {notification.message}
        </div>
      ))}
    </div>
  );
}

function FeatureComponent() {
  const { addNotification } = useApp();
  
  const handleAction = () => {
    // Do something
    addNotification({
      message: 'Action completed successfully!',
      type: 'success',
      duration: 5000
    });
  };
  
  return (
    <div>
      <button onClick={handleAction}>Perform Action</button>
    </div>
  );
}
                

This example demonstrates using Context with useReducer for more complex state management. This approach is similar to Redux but contained within React's built-in API. It's particularly useful for applications with multiple related state transitions and complex logic.

Context Module Pattern

This pattern encapsulates all the context-related code in a single module, making it easy to import and use.

// userContext.js
import React, { createContext, useReducer, useContext } from 'react';

// Define action types as constants
const ActionTypes = {
  LOGIN: 'user/login',
  LOGOUT: 'user/logout',
  UPDATE_PROFILE: 'user/updateProfile',
};

// Initial state
const initialState = {
  user: null,
  isAuthenticated: false,
  isLoading: false,
  error: null,
};

// Reducer function
function userReducer(state, action) {
  switch (action.type) {
    case ActionTypes.LOGIN:
      return {
        ...state,
        user: action.payload,
        isAuthenticated: true,
        error: null,
      };
    case ActionTypes.LOGOUT:
      return {
        ...state,
        user: null,
        isAuthenticated: false,
      };
    case ActionTypes.UPDATE_PROFILE:
      return {
        ...state,
        user: { ...state.user, ...action.payload },
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// Create context
const UserContext = createContext();

// Create provider component
function UserProvider({ children }) {
  const [state, dispatch] = useReducer(userReducer, initialState);
  
  // Create action creators
  const login = (userData) => {
    dispatch({ type: ActionTypes.LOGIN, payload: userData });
  };
  
  const logout = () => {
    dispatch({ type: ActionTypes.LOGOUT });
  };
  
  const updateProfile = (profileData) => {
    dispatch({ type: ActionTypes.UPDATE_PROFILE, payload: profileData });
  };
  
  // Memoize value to prevent unnecessary re-renders
  const value = React.useMemo(() => {
    return {
      ...state,
      login,
      logout,
      updateProfile,
    };
  }, [state]);
  
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// Hook for consuming context
function useUser() {
  const context = useContext(UserContext);
  if (context === undefined) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

// Export everything needed to use this context
export { UserProvider, useUser, ActionTypes };

// Usage example:
// import { UserProvider, useUser } from './userContext';
                

This pattern provides a clean, encapsulated API for context usage throughout your application. It's similar to how Redux modules are organized, with actions, reducers, and selectors all in one place.

Async Operations with Context

Context can be combined with async operations for data fetching, API calls, etc.

// dataContext.js
import React, { createContext, useReducer, useContext, useCallback } from 'react';

const initialState = {
  data: null,
  isLoading: false,
  error: null,
};

function dataReducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':
      return {
        ...state,
        isLoading: true,
        error: null,
      };
    case 'FETCH_SUCCESS':
      return {
        data: action.payload,
        isLoading: false,
        error: null,
      };
    case 'FETCH_ERROR':
      return {
        ...state,
        isLoading: false,
        error: action.payload,
      };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

const DataContext = createContext();

function DataProvider({ children }) {
  const [state, dispatch] = useReducer(dataReducer, initialState);
  
  const fetchData = useCallback(async (url) => {
    dispatch({ type: 'FETCH_START' });
    
    try {
      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      
      const data = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
      return data;
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error.message });
      throw error;
    }
  }, []);
  
  const value = {
    ...state,
    fetchData,
  };
  
  return (
    <DataContext.Provider value={value}>
      {children}
    </DataContext.Provider>
  );
}

function useData() {
  const context = useContext(DataContext);
  if (context === undefined) {
    throw new Error('useData must be used within a DataProvider');
  }
  return context;
}

export { DataProvider, useData };

// Usage in a component
function ProductList() {
  const { data, isLoading, error, fetchData } = useData();
  
  React.useEffect(() => {
    fetchData('/api/products');
  }, [fetchData]);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!data) return <div>No data</div>;
  
  return (
    <div>
      <h2>Products</h2>
      <ul>
        {data.map(product => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}
                

This pattern combines context with async operations, providing a clean way to handle loading states, errors, and data throughout your application.

Composing Multiple Contexts

For complex applications, you might have multiple contexts that need to work together.

// AppProviders.js - Combining multiple context providers
import React from 'react';
import { ThemeProvider } from './themeContext';
import { UserProvider } from './userContext';
import { DataProvider } from './dataContext';
import { NotificationProvider } from './notificationContext';

// Create a component that composes all providers
function AppProviders({ children }) {
  return (
    <ThemeProvider>
      <UserProvider>
        <DataProvider>
          <NotificationProvider>
            {children}
          </NotificationProvider>
        </DataProvider>
      </UserProvider>
    </ThemeProvider>
  );
}

export default AppProviders;

// App.js
import React from 'react';
import AppProviders from './AppProviders';
import MainApp from './MainApp';

function App() {
  return (
    <AppProviders>
      <MainApp />
    </AppProviders>
  );
}

// A component using multiple contexts
function ProfileSettings() {
  const { user, updateProfile } = useUser();
  const { theme, toggleTheme } = useTheme();
  const { addNotification } = useNotification();
  
  const handleSaveProfile = async (profileData) => {
    try {
      await updateProfile(profileData);
      addNotification({
        type: 'success',
        message: 'Profile updated successfully!',
      });
    } catch (error) {
      addNotification({
        type: 'error',
        message: `Failed to update profile: ${error.message}`,
      });
    }
  };
  
  return (
    <div className={`profile-settings ${theme}`}>
      <h2>Profile Settings for {user.name}</h2>
      
      <div className="setting-group">
        <h3>Appearance</h3>
        <label>
          Theme:
          <select 
            value={theme} 
            onChange={e => toggleTheme(e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      
      {/* Profile form fields would go here */}
      
      <button onClick={() => handleSaveProfile({ /* form data */ })}>
        Save Changes
      </button>
    </div>
  );
}
                

This pattern allows for a clean separation of concerns, with each context handling its own domain while components can easily access multiple contexts as needed.

Context with TypeScript

Adding TypeScript provides type safety to your context code.

// themeContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

// Define types
type Theme = 'light' | 'dark';

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
  setTheme: (theme: Theme) => void;
}

// Create context with a default value
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme?: Theme;
}

function ThemeProvider({ 
  children, 
  initialTheme = 'light'
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(initialTheme);
  
  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };
  
  // Memoize the value to prevent unnecessary re-renders
  const value = React.useMemo(() => {
    return { theme, toggleTheme, setTheme };
  }, [theme]);
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook with type safety
function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);
  
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  
  return context;
}

export { ThemeProvider, useTheme, type Theme, type ThemeContextType };

// Usage in a component
import React from 'react';
import { useTheme } from './themeContext';

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
}

function ThemedButton({ children, onClick }: ButtonProps) {
  const { theme } = useTheme();
  
  return (
    <button 
      className={`btn btn-${theme}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}
                

TypeScript enhances context usage by providing type safety, which helps catch errors during development and improves the developer experience with better autocomplete and documentation.

Authentication Context

// authContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  
  // Initialize auth state on mount
  useEffect(() => {
    // Check for existing auth token in localStorage
    const token = localStorage.getItem('auth_token');
    
    if (token) {
      // Fetch user data from API using the token
      fetchUserData(token)
        .then(userData => {
          setUser(userData);
          setIsLoading(false);
        })
        .catch(() => {
          // Token might be invalid or expired
          localStorage.removeItem('auth_token');
          setIsLoading(false);
        });
    } else {
      setIsLoading(false);
    }
  }, []);
  
  // Function to fetch user data from API
  const fetchUserData = async (token) => {
    const response = await fetch('/api/me', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    
    return response.json();
  };
  
  // Login function
  const login = async (email, password) => {
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ email, password })
      });
      
      if (!response.ok) {
        throw new Error('Login failed');
      }
      
      const data = await response.json();
      localStorage.setItem('auth_token', data.token);
      
      // Set user data in state
      setUser(data.user);
      
      return data.user;
    } catch (error) {
      console.error('Login error:', error);
      throw error;
    }
  };
  
  // Logout function
  const logout = () => {
    localStorage.removeItem('auth_token');
    setUser(null);
  };
  
  // Register function
  const register = async (userData) => {
    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
      });
      
      if (!response.ok) {
        throw new Error('Registration failed');
      }
      
      const data = await response.json();
      localStorage.setItem('auth_token', data.token);
      
      // Set user data in state
      setUser(data.user);
      
      return data.user;
    } catch (error) {
      console.error('Registration error:', error);
      throw error;
    }
  };
  
  const value = {
    user,
    isLoading,
    isAuthenticated: !!user,
    login,
    logout,
    register
  };
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const context = useContext(AuthContext);
  
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  
  return context;
}

export { AuthProvider, useAuth };

// Usage in components
function LoginForm() {
  const { login } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    try {
      await login(email, password);
      // Redirect or show success message
    } catch (err) {
      setError('Invalid email or password');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      
      <button type="submit">Login</button>
    </form>
  );
}

function PrivateRoute({ children }) {
  const { isAuthenticated, isLoading } = useAuth();
  const navigate = useNavigate();
  
  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      navigate('/login');
    }
  }, [isLoading, isAuthenticated, navigate]);
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  return isAuthenticated ? children : null;
}

// In your app
function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
          <Route
            path="/dashboard"
            element={
              <PrivateRoute>
                <Dashboard />
              </PrivateRoute>
            }
          />
          <Route path="/" element={<HomePage />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}
                

This authentication context example provides a complete solution for user authentication, including login, logout, registration, and protected routes. It's a common pattern used in many React applications to manage user authentication state.

Internationalization (i18n) Context

// i18nContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';

// Sample translations
const translations = {
  en: {
    greeting: 'Hello',
    welcome: 'Welcome to our app',
    profile: 'Profile',
    settings: 'Settings',
    logout: 'Logout',
    loading: 'Loading...',
    // Add more translations as needed
  },
  es: {
    greeting: 'Hola',
    welcome: 'Bienvenido a nuestra aplicación',
    profile: 'Perfil',
    settings: 'Configuración',
    logout: 'Cerrar sesión',
    loading: 'Cargando...',
  },
  fr: {
    greeting: 'Bonjour',
    welcome: 'Bienvenue sur notre application',
    profile: 'Profil',
    settings: 'Paramètres',
    logout: 'Déconnexion',
    loading: 'Chargement...',
  },
};

const I18nContext = createContext();

function I18nProvider({ children }) {
  // Initialize with browser language or default to English
  const [locale, setLocale] = useState(() => {
    const savedLocale = localStorage.getItem('locale');
    const browserLocale = navigator.language.split('-')[0];
    return savedLocale || (translations[browserLocale] ? browserLocale : 'en');
  });
  
  // Update localStorage when locale changes
  useEffect(() => {
    localStorage.setItem('locale', locale);
    // Optionally update document lang attribute
    document.documentElement.lang = locale;
  }, [locale]);
  
  // Function to get translated text
  const t = (key, params = {}) => {
    const translation = translations[locale]?.[key] || translations.en?.[key] || key;
    
    // Replace any parameters in the translation
    return Object.entries(params).reduce(
      (acc, [param, value]) => acc.replace(`{{${param}}}`, value),
      translation
    );
  };
  
  // Get available languages
  const availableLocales = Object.keys(translations);
  
  const value = {
    locale,
    setLocale,
    t,
    availableLocales,
  };
  
  return (
    <I18nContext.Provider value={value}>
      {children}
    </I18nContext.Provider>
  );
}

function useI18n() {
  const context = useContext(I18nContext);
  
  if (context === undefined) {
    throw new Error('useI18n must be used within an I18nProvider');
  }
  
  return context;
}

export { I18nProvider, useI18n };

// Usage in components
function Header() {
  const { t, locale, setLocale, availableLocales } = useI18n();
  
  return (
    <header>
      <h1>{t('greeting')}, User!</h1>
      <p>{t('welcome')}</p>
      
      <div className="language-selector">
        <label htmlFor="language-select">Language:</label>
        <select
          id="language-select"
          value={locale}
          onChange={(e) => setLocale(e.target.value)}
        >
          {availableLocales.map((loc) => (
            <option key={loc} value={loc}>
              {loc.toUpperCase()}
            </option>
          ))}
        </select>
      </div>
      
      <nav>
        <ul>
          <li><a href="/profile">{t('profile')}</a></li>
          <li><a href="/settings">{t('settings')}</a></li>
          <li><a href="/logout">{t('logout')}</a></li>
        </ul>
      </nav>
    </header>
  );
}

// Using with parameters
function WelcomeMessage({ username }) {
  const { t } = useI18n();
  
  return <h2>{t('welcomeUser', { username })}</h2>;
}
                

This internationalization context provides a way to manage and access translations throughout your application. It's a simplified example, but it demonstrates the core concepts of an i18n system using Context.

Shopping Cart Context

// cartContext.js
import React, { createContext, useContext, useReducer, useEffect } from 'react';

// Initial state
const initialState = {
  items: [],
  itemCount: 0,
  total: 0,
};

// Action types
const ActionTypes = {
  ADD_ITEM: 'cart/addItem',
  REMOVE_ITEM: 'cart/removeItem',
  UPDATE_QUANTITY: 'cart/updateQuantity',
  CLEAR_CART: 'cart/clearCart',
};

// Cart reducer
function cartReducer(state, action) {
  switch (action.type) {
    case ActionTypes.ADD_ITEM: {
      const newItem = action.payload;
      
      // Check if item already exists in cart
      const existingItemIndex = state.items.findIndex(
        item => item.id === newItem.id
      );
      
      if (existingItemIndex >= 0) {
        // Item exists, update quantity
        const newItems = [...state.items];
        newItems[existingItemIndex] = {
          ...newItems[existingItemIndex],
          quantity: newItems[existingItemIndex].quantity + (newItem.quantity || 1),
        };
        
        return {
          ...state,
          items: newItems,
          itemCount: state.itemCount + (newItem.quantity || 1),
          total: state.total + (newItem.price * (newItem.quantity || 1)),
        };
      } else {
        // Item doesn't exist, add new item
        const itemWithQuantity = {
          ...newItem,
          quantity: newItem.quantity || 1,
        };
        
        return {
          ...state,
          items: [...state.items, itemWithQuantity],
          itemCount: state.itemCount + itemWithQuantity.quantity,
          total: state.total + (newItem.price * itemWithQuantity.quantity),
        };
      }
    }
    
    case ActionTypes.REMOVE_ITEM: {
      const itemId = action.payload;
      const itemToRemove = state.items.find(item => item.id === itemId);
      
      if (!itemToRemove) return state;
      
      return {
        ...state,
        items: state.items.filter(item => item.id !== itemId),
        itemCount: state.itemCount - itemToRemove.quantity,
        total: state.total - (itemToRemove.price * itemToRemove.quantity),
      };
    }
    
    case ActionTypes.UPDATE_QUANTITY: {
      const { id, quantity } = action.payload;
      
      if (quantity <= 0) {
        // If quantity is 0 or negative, remove the item
        return cartReducer(state, { type: ActionTypes.REMOVE_ITEM, payload: id });
      }
      
      const existingItemIndex = state.items.findIndex(item => item.id === id);
      
      if (existingItemIndex === -1) return state;
      
      const item = state.items[existingItemIndex];
      const quantityDifference = quantity - item.quantity;
      
      const newItems = [...state.items];
      newItems[existingItemIndex] = {
        ...item,
        quantity,
      };
      
      return {
        ...state,
        items: newItems,
        itemCount: state.itemCount + quantityDifference,
        total: state.total + (item.price * quantityDifference),
      };
    }
    
    case ActionTypes.CLEAR_CART:
      return initialState;
      
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// Create context
const CartContext = createContext();

function CartProvider({ children }) {
  // Initialize cart from localStorage if available
  const [state, dispatch] = useReducer(cartReducer, initialState, () => {
    const savedCart = localStorage.getItem('cart');
    return savedCart ? JSON.parse(savedCart) : initialState;
  });
  
  // Save cart to localStorage when it changes
  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(state));
  }, [state]);
  
  // Helper functions for common actions
  const addItem = (item) => {
    dispatch({ type: ActionTypes.ADD_ITEM, payload: item });
  };
  
  const removeItem = (itemId) => {
    dispatch({ type: ActionTypes.REMOVE_ITEM, payload: itemId });
  };
  
  const updateQuantity = (id, quantity) => {
    dispatch({
      type: ActionTypes.UPDATE_QUANTITY,
      payload: { id, quantity },
    });
  };
  
  const clearCart = () => {
    dispatch({ type: ActionTypes.CLEAR_CART });
  };
  
  const value = {
    ...state,
    addItem,
    removeItem,
    updateQuantity,
    clearCart,
  };
  
  return (
    <CartContext.Provider value={value}>
      {children}
    </CartContext.Provider>
  );
}

function useCart() {
  const context = useContext(CartContext);
  
  if (context === undefined) {
    throw new Error('useCart must be used within a CartProvider');
  }
  
  return context;
}

export { CartProvider, useCart };

// Usage in components
function ProductCard({ product }) {
  const { addItem } = useCart();
  
  const handleAddToCart = () => {
    addItem(product);
  };
  
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price.toFixed(2)}</p>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  );
}

function CartIcon() {
  const { itemCount } = useCart();
  
  return (
    <div className="cart-icon">
      <span className="icon">🛒</span>
      {itemCount > 0 && <span className="badge">{itemCount}</span>}
    </div>
  );
}

function CartPage() {
  const { items, total, removeItem, updateQuantity, clearCart } = useCart();
  
  if (items.length === 0) {
    return <div>Your cart is empty</div>;
  }
  
  return (
    <div className="cart-page">
      <h1>Your Cart</h1>
      
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {items.map(item => (
            <tr key={item.id}>
              <td>
                <div className="cart-item">
                  <img src={item.image} alt={item.name} />
                  <span>{item.name}</span>
                </div>
              </td>
              <td>${item.price.toFixed(2)}</td>
              <td>
                <input
                  type="number"
                  min="1"
                  value={item.quantity}
                  onChange={(e) => updateQuantity(item.id, parseInt(e.target.value, 10))}
                />
              </td>
              <td>${(item.price * item.quantity).toFixed(2)}</td>
              <td>
                <button onClick={() => removeItem(item.id)}>
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan="3">Total</td>
            <td>${total.toFixed(2)}</td>
            <td>
              <button onClick={clearCart}>Clear Cart</button>
            </td>
          </tr>
        </tfoot>
      </table>
      
      <button className="checkout-button">Proceed to Checkout</button>
    </div>
  );
}
                

This shopping cart context provides a complete solution for managing cart items, quantities, and totals. It includes persistence to localStorage and helper functions for common cart operations.