Context API — Sharing State Without Prop Drilling

React’s Context API solves prop drilling — the tedious pattern of passing a value through many intermediate components just to reach a deeply nested consumer. Authentication state is the canonical example: the logged-in user’s name is needed in the header, the dashboard, and the post editor, but passing it from the root through every layout and page component is impractical. Context lets you place a value in a “tree-wide scope” and have any component consume it directly, without threading the prop through intermediaries.

Creating and Using Context #

import { createContext, useContext, useState } from "react";

// ── 1. Create the context (and a custom hook to consume it) ───────────────────
const ThemeContext = createContext(null);   // null = no default value

export function useTheme() {
    const ctx = useContext(ThemeContext);
    if (!ctx) throw new Error("useTheme must be used inside ThemeProvider");
    return ctx;
}

// ── 2. Create the Provider ────────────────────────────────────────────────────
export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState("light");

    function toggleTheme() {
        setTheme((t) => (t === "light" ? "dark" : "light"));
    }

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

// ── 3. Wrap the app ───────────────────────────────────────────────────────────
// src/main.jsx:
// <ThemeProvider><BrowserRouter><App /></BrowserRouter></ThemeProvider>

// ── 4. Consume in any component without prop drilling ─────────────────────────
function Header() {
    const { theme, toggleTheme } = useTheme();
    return (
        <header className={theme === "dark" ? "bg-gray-900 text-white" : "bg-white"}>
            <button onClick={toggleTheme}>Toggle theme</button>
        </header>
    );
}

When to Use Context vs Alternatives #

Common Mistakes #

Mistake 1 — Inline object in Provider value (unnecessary re-renders) #

❌ Wrong — new object on every render triggers all consumers:

function Provider({ children }) {
    const [user, setUser] = useState(null);
    return (
        <Ctx.Provider value={{ user, setUser }}>  {/* new object every render! */}
            {children}
        </Ctx.Provider>
    );
}

✅ Correct — memoize the value:

import { useMemo } from "react";
const value = useMemo(() => ({ user, setUser }), [user]);
return <Ctx.Provider value={value}>{children}</Ctx.Provider>;   // ✓

Mistake 2 — Using context without a custom hook (no error on misuse) #

❌ Wrong — silent null if used outside provider:

export const AuthContext = createContext(null);
// Usage: const ctx = useContext(AuthContext) — ctx is null outside provider, crashes later

✅ Correct — export a hook with a guard:

export function useAuth() {
    const ctx = useContext(AuthContext);
    if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
    return ctx;
}

Quick Reference #