React Context API Explained: Avoid Prop Drilling and Share State Globally

// ❌ THE PROBLEM: currentUser drills through components that don't need it
// App knows the user. UserAvatar needs it. But Navbar and Header are just middlemen.

function App() {
  const currentUser = { name: 'Maya', role: 'admin', avatarUrl: '/maya.png' };

  // App passes currentUser to Navbar even though Navbar doesn't use it directly
  return <Navbar currentUser={currentUser} />;
}

function Navbar({ currentUser }) {
  // Navbar doesn't display the user — it just passes the prop along. Pure relay.
  return (
    <nav>
      <Logo />
      <Header currentUser={currentUser} />
    </nav>
  );
}

function Header({ currentUser }) {
  // Header also doesn't use currentUser — still just passing it down
  return (
    <header>
      <h1>Dashboard</h1>
      <UserAvatar currentUser={currentUser} />
    </header>
  );
}

function UserAvatar({ currentUser }) {
  // Only THIS component actually needed currentUser all along
  return (
    <div className="avatar">
      <img src={currentUser.avatarUrl} alt={currentUser.name} />
      <span>{currentUser.name}</span>
    </div>
  );
}

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

// Step 1: Create the context with a meaningful default value of null.
// The null signals "there is no provider above this — something is wrong."
const AuthContext = createContext(null);

// Step 2: Build the Provider component. This is what wraps your app.
// It owns the state and decides what to expose.
export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // Simulate an async login (replace with a real API call)
  async function login(email, password) {
    setIsLoading(true);
    // In a real app: const user = await authService.login(email, password);
    const mockUser = { id: '42', name: 'Maya Patel', email, role: 'admin' };
    setCurrentUser(mockUser);
    setIsLoading(false);
  }

  function logout() {
    setCurrentUser(null);
  }

  // Derived state: compute this once here, not in every component that needs it
  const isAdmin = currentUser?.role === 'admin';
  const isAuthenticated = currentUser !== null;

  // The value object is what every consumer will receive
  const contextValue = {
    currentUser,
    isAuthenticated,
    isAdmin,
    isLoading,
    login,
    logout,
  };

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

// Step 3: Create a custom hook. This is the ONLY way components should access auth.
// The error guard here is gold — it catches misuse immediately during development.
export function useAuth() {
  const context = useContext(AuthContext);

  if (context === null) {
    // This throws if a component calls useAuth() outside of <AuthProvider>
    throw new Error(
      'useAuth must be used inside an <AuthProvider>. ' +
      'Make sure AuthProvider wraps this component in your tree.'
    );
  }

  return context;
}

// ─────────────────────────────────────────
// How to wire it up in your app root:
// ─────────────────────────────────────────

// index.jsx or main.jsx
// import { AuthProvider } from './AuthContext';
//
// ReactDOM.createRoot(document.getElementById('root')).render(
//   <AuthProvider>
//     <App />
//   </AuthProvider>
// );

// ─────────────────────────────────────────
// Using it in a deeply nested component:
// ─────────────────────────────────────────

function UserAvatar() {
  // One clean line. No props needed. No drilling.
  const { currentUser, logout, isAdmin } = useAuth();

  if (!currentUser) return <span>Guest</span>;

  return (
    <div className="user-avatar">
      <img src={`/avatars/${currentUser.id}.png`} alt={currentUser.name} />
      <span>{currentUser.name}</span>
      {isAdmin && <span className="badge">Admin</span>}
      <button onClick={logout}>Sign Out</button>
    </div>
  );
}

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

// Split contexts: one for the value, one for the setter
// This is the advanced pattern — components that only READ the theme
// won't re-render when the SETTER function reference changes
const ThemeValueContext = createContext(null);
const ThemeActionsContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light'); // 'light' | 'dark' | 'system'

  // useCallback stabilises the reference to toggleTheme across re-renders
  // Without this, toggleTheme is a brand-new function every render
  const toggleTheme = useCallback(() => {
    setTheme(previous => previous === 'light' ? 'dark' : 'light');
  }, []); // Empty deps: this function never needs to be recreated

  const setSystemTheme = useCallback(() => {
    setTheme('system');
  }, []);

  // useMemo stabilises the value object so its reference only changes
  // when `theme` actually changes — not on every parent re-render
  const themeValue = useMemo(() => ({
    theme,
    isDark: theme === 'dark',
    isLight: theme === 'light',
  }), [theme]); // Only recompute when theme changes

  // Actions are stable (useCallback above), so this object is also stable
  const themeActions = useMemo(() => ({
    toggleTheme,
    setSystemTheme,
  }), [toggleTheme, setSystemTheme]);

  return (
    <ThemeValueContext.Provider value={themeValue}>
      <ThemeActionsContext.Provider value={themeActions}>
        {children}
      </ThemeActionsContext.Provider>
    </ThemeValueContext.Provider>
  );
}

// Separate hooks for reading vs acting — pure reads won't re-render on action changes
export function useTheme() {
  const context = useContext(ThemeValueContext);
  if (!context) throw new Error('useTheme must be used inside <ThemeProvider>');
  return context;
}

export function useThemeActions() {
  const context = useContext(ThemeActionsContext);
  if (!context) throw new Error('useThemeActions must be used inside <ThemeProvider>');
  return context;
}

// ─────────────────────────────────────────
// Usage in components:
// ─────────────────────────────────────────

function ThemedBackground({ children }) {
  // This component re-renders only when theme value changes
  const { theme, isDark } = useTheme();

  return (
    <div
      className={`app-background ${isDark ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}`}
      data-theme={theme}
    >
      {children}
    </div>
  );
}

function ThemeToggleButton() {
  // This component ONLY needs the action — it never re-renders due to theme value changes
  const { toggleTheme } = useThemeActions();
  // Tip: wrap in React.memo to prevent re-renders from parent components too
  return <button onClick={toggleTheme}>Toggle Theme</button>;
}

// Real-world compound component pattern: Context scoped to a feature, not the whole app.
// The Accordion shares open/close state with AccordionItem internally.
// Neither the parent nor the developer using this component needs to know it uses Context.

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

// This context is PRIVATE to the Accordion feature — not exported
const AccordionContext = createContext(null);

function Accordion({ children, allowMultiple = false }) {
  // openItems holds the set of currently-expanded item IDs
  const [openItems, setOpenItems] = useState(new Set());

  function toggleItem(itemId) {
    setOpenItems(previous => {
      const updated = new Set(previous);

      if (updated.has(itemId)) {
        updated.delete(itemId); // Collapse this item
      } else {
        if (!allowMultiple) updated.clear(); // Close all others first
        updated.add(itemId); // Expand this item
      }

      return updated;
    });
  }

  return (
    <AccordionContext.Provider value={{ openItems, toggleItem }}>
      <div className="accordion" role="presentation">
        {children}
      </div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ itemId, title, children }) {
  // AccordionItem reaches into Accordion's context directly
  // The developer using <AccordionItem> doesn't pass any open/close props
  const { openItems, toggleItem } = useContext(AccordionContext);
  const isOpen = openItems.has(itemId);

  return (
    <div className="accordion-item">
      <button
        className="accordion-trigger"
        aria-expanded={isOpen}
        onClick={() => toggleItem(itemId)}
      >
        {title}
        <span aria-hidden>{isOpen ? '▲' : '▼'}</span>
      </button>

      {/* Only render children in the DOM when the panel is open */}
      {isOpen && (
        <div className="accordion-panel" role="region">
          {children}
        </div>
      )}
    </div>
  );
}

// The developer using this never sees the Context — clean public API
function FrequentlyAskedQuestions() {
  return (
    <Accordion allowMultiple={false}>
      <AccordionItem itemId="shipping" title="How long does shipping take?">
        <p>Standard shipping takes 3–5 business days.</p>
      </AccordionItem>
      <AccordionItem itemId="returns" title="What is the return policy?">
        <p>You can return any item within 30 days of purchase.</p>
      </AccordionItem>
      <AccordionItem itemId="payment" title="Which payment methods are accepted?">
        <p>We accept Visa, Mastercard, and PayPal.</p>
      </AccordionItem>
    </Accordion>
  );
}