Context API

Sharing data across many components without passing props through every level - createContext, Provider, and useContext explained.

What it is, in plain English: Context lets a component tree share data without passing it down manually through every intermediate component (avoiding 'props drilling'). You create a Context with createContext(), wrap part of the tree in a Provider that supplies a value, and any descendant component can read that value with useContext() -- no matter how deeply nested. Context is best for data that many components need: theme, current user, language, or app-wide settings.

Avoiding props drilling

If many components need the same piece of data -- the current theme, the logged-in user, the selected language -- passing it down as a prop through every layer ("props drilling") gets tedious and brittle. Context lets distant descendants read a value directly, skipping all the layers in between.

The three steps

// STEP 1: Create the context (usually in its own file)
const ThemeContext = React.createContext("light");  // "light" = default value

// STEP 2: Wrap part of your tree in a Provider, supplying the actual value
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Page />
    </ThemeContext.Provider>
  );
}

// STEP 3: Read the value anywhere inside, with useContext
function DeeplyNestedButton() {
  const theme = React.useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}
// DeeplyNestedButton can be 10 levels deep -- it still reads "dark" directly,
// with NO props passed through any of the components in between.

Context with state -- the common real pattern

function App() {
  const [theme, setTheme] = React.useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme("dark")}>Switch to dark</button>
      <Dashboard />
    </ThemeContext.Provider>
  );
}

// When theme state changes, EVERY component reading ThemeContext re-renders
// automatically with the new value -- no manual prop updates needed anywhere.

Without Context vs with Context

// ✗ WITHOUT Context -- props drilling through layers that don't use the data:
function App()      { return <Layout user={user} />; }
function Layout({ user })   { return <Sidebar user={user} />; }
function Sidebar({ user })  { return <UserMenu user={user} />; }
function UserMenu({ user }) { return <p>{user.name}</p>; }

// ✓ WITH Context -- only the component that needs it touches it:
const UserContext = React.createContext(null);
function App()    { return <UserContext.Provider value={user}><Layout /></UserContext.Provider>; }
function Layout()   { return <Sidebar />; }      // no 'user' prop needed
function Sidebar()  { return <UserMenu />; }     // no 'user' prop needed
function UserMenu()  {
  const user = React.useContext(UserContext);    // reads directly
  return <p>{user.name}</p>;
}

Try It Yourself (JSX)

// Context API -- share data without passing props through every level

// 1. Create a context
const ThemeContext = React.createContext("light");

// 2. Provide a value somewhere high in the tree
function App() {
  const [theme, setTheme] = React.useState("light");

return (
    <ThemeContext.Provider value={theme}>
      <div>
        <button onClick={() => setTheme(t => t === "light" ? "dark" : "light")}>
          Toggle theme
        </button>
        <Page />
      </div>
    </ThemeContext.Provider>
  );
}

// 3. Any descendant can read it -- no matter how deep
function Page() {
  return <Toolbar />;  // doesn't need to know about theme at all
}

function Toolbar() {
  return <ThemedButton />;  // doesn't need to know about theme either
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);  // reads it directly!
  return (
    <button style={{
      background: theme === "dark" ? "#222" : "#eee",
      color: theme === "dark" ? "#fff" : "#000",
      padding: "8px 16px"
    }}>
      Current theme: {theme}
    </button>
  );
}

console.log("Context skips props drilling -- deeply nested components read it directly");

// A more realistic example -- an auth context with object value
const AuthContext = React.createContext(null);

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

function App() {
  return (
    <AuthProvider>
      <UserGreeting />
    </AuthProvider>
  );
}

Object values, custom hooks, and multiple contexts

Combining state and functions in one context value

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);

  function login(credentials) {
    // ... authenticate ...
    setUser({ name: credentials.name });
  }
  function logout() {
    setUser(null);
  }

  // Provide both the data AND the functions to change it:
  const value = { user, login, logout };

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

// Any component can both READ user and CALL login/logout:
function LoginButton() {
  const { user, login, logout } = React.useContext(AuthContext);
  return user
    ? <button onClick={logout}>Log out {user.name}</button>
    : <button onClick={() => login({ name: "Alice" })}>Log in</button>;
}

A custom hook wrapper (the standard pattern)

// Wrapping useContext in a custom hook gives a nicer API and catches misuse:
function useAuth() {
  const context = React.useContext(AuthContext);
  if (context === null) {
    throw new Error("useAuth must be used inside an AuthProvider");
  }
  return context;
}

// Usage is now cleaner, and you get a helpful error if someone forgets the Provider:
function Profile() {
  const { user, logout } = useAuth();  // instead of useContext(AuthContext)
  return <button onClick={logout}>{user.name}</button>;
}

Multiple contexts together

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <LanguageProvider>
          <Dashboard />
        </LanguageProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

function Dashboard() {
  const { user } = useAuth();
  const { theme } = useTheme();
  const { lang }  = useLanguage();
  // reads from THREE different contexts, each independently
}

Context performance and when NOT to use it

// PERFORMANCE GOTCHA: every component reading a context re-renders
// whenever the Provider's value changes -- even if they only use PART of it.

function AppProvider({ children }) {
  const [user, setUser] = React.useState(null);
  const [theme, setTheme] = React.useState("light");

  // ✗ BAD: creates a NEW object every render, even if user/theme didn't change:
  const value = { user, setUser, theme, setTheme };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
  // Every consumer re-renders on EVERY App re-render, regardless of what changed.

  // ✓ BETTER: memoise the value object:
  // const value = React.useMemo(() => ({ user, setUser, theme, setTheme }), [user, theme]);
}

// ✓ EVEN BETTER for unrelated data: split into separate contexts.
// A component reading only ThemeContext won't re-render when AuthContext changes:
<AuthContext.Provider value={authValue}>
  <ThemeContext.Provider value={themeValue}>
    {children}
  </ThemeContext.Provider>
</AuthContext.Provider>

Context is not a replacement for all state management

Context is designed for relatively low-frequency updates (theme, auth, locale) shared by many components. For high-frequency updates affecting large component trees (every keystroke in a complex form, real-time data feeds), Context's all-consumers-re-render behaviour becomes a performance problem. State management libraries like Zustand or Redux use external stores with selective subscriptions, so a component only re-renders when the specific slice of state it reads actually changes -- something Context alone doesn't provide without careful manual splitting and memoisation.

Official Sources

The Codex links only to official documentation. No third-party tutorials.