useContext & context

Props are the main way to pass data in React — explicit and easy to follow. But some data is needed by many components at different depths: the current user, the theme, the language, a shopping cart. Passing it through every intermediate component ("prop drilling") gets tedious and fragile. Context lets a parent make a value available to its entire subtree.

The problem: prop drilling#

function App() {
  const [theme, setTheme] = useState("dark");
  return <Layout theme={theme} />;
}
function Layout({ theme }) {
  return <Sidebar theme={theme} />; // Layout doesn't use theme – it just passes it on
}
function Sidebar({ theme }) {
  return <ThemedButton theme={theme} />;
}
function ThemedButton({ theme }) {
  return <button className={`btn-${theme}`}>Save</button>;
}

Only ThemedButton needs theme, but every component in between must accept and forward it.

Using context in three steps#

1. Create a context

// src/theme-context.js
import { createContext } from "react";

export const ThemeContext = createContext("light"); // "light" is the default value

2. Provide a value

Wrap part of your tree with the context. In React 19 you render the context itself as the provider:

import { useState } from "react";
import { ThemeContext } from "./theme-context.js";

export default function App() {
  const [theme, setTheme] = useState("dark");

  return (
    <ThemeContext value={theme}>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>Toggle theme</button>
      <Layout />
    </ThemeContext>
  );
}

(Before React 19 this was written <ThemeContext.Provider value={theme}>, which still works.)

3. Read it anywhere below

import { useContext } from "react";
import { ThemeContext } from "./theme-context.js";

function Layout() {
  return <Sidebar />; // no theme prop!
}
function Sidebar() {
  return <ThemedButton />;
}
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={`btn btn-${theme}`}>Save ({theme})</button>;
}

useContext finds the nearest provider above the component and returns its value. When that value changes, every component reading it re-renders automatically.

Updating context from below#

Put the state and the functions to change it into the context value:

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

const AuthContext = createContext(null);

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

  const value = useMemo(
    () => ({
      user,
      login: (name) => setUser({ name }),
      logout: () => setUser(null),
    }),
    [user]
  );

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

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

function Header() {
  const { user, login, logout } = useAuth();
  return (
    <header>
      {user ? (
        <>
          Hi, {user.name}! <button onClick={logout}>Log out</button>
        </>
      ) : (
        <button onClick={() => login("Ada")}>Log in</button>
      )}
    </header>
  );
}

function Dashboard() {
  const { user } = useAuth();
  return <main>{user ? `${user.name}'s dashboard` : "Please log in."}</main>;
}

export default function App() {
  return (
    <AuthProvider>
      <Header />
      <Dashboard />
    </AuthProvider>
  );
}

This provider component + custom hook pattern is how most apps use context:

• The provider owns the state and hides the details.
• The useAuth hook gives a clean API and a helpful error if someone forgets the provider (instead of a confusing null).
• useMemo keeps the value object stable so consumers only re-render when user actually changes.

Default values#

The argument to createContext is used only when there's no provider above. It's useful for sensible fallbacks ("light") and for tests. For contexts that must always be provided, use null and throw from the custom hook as above.

Nesting and overriding#

The nearest provider wins, so you can override a value for part of the tree:

<ThemeContext value="dark">
  <Page />
  <ThemeContext value="light">
    <Footer /> {/* reads "light" */}
  </ThemeContext>
</ThemeContext>

Context and performance#

Every component that calls useContext(SomeContext) re-renders when the context value changes. Keep this efficient:

• Memoise object/array values with useMemo (as above), so a provider's parent re-rendering doesn't create a "new" value.
• Split contexts by how often they change. A rarely-changing ThemeContext shouldn't be combined with a fast-changing CursorPositionContext.
• Separate state and actions: putting dispatch (which never changes) in its own context means components that only send updates never re-render because of them.

const CartStateContext = createContext(null);
const CartDispatchContext = createContext(null);

function CartProvider({ children }) {
  const [items, dispatch] = useReducer(cartReducer, []);
  return (
    <CartStateContext value={items}>
      <CartDispatchContext value={dispatch}>{children}</CartDispatchContext>
    </CartStateContext>
  );
}

(useReducer is the next lesson.) If you find yourself fighting context re-renders for frequently-changing global state, a store library like Zustand may fit better — see State management.

Reading context with use#

React 19's use API can also read context, and unlike useContext it may be called inside conditions:

import { use } from "react";

function Price({ amount, showCurrency }) {
  if (showCurrency) {
    const currency = use(CurrencyContext);
    return <span>{new Intl.NumberFormat("en-IN", { style: "currency", currency }).format(amount)}</span>;
  }
  return <span>{amount}</span>;
}

When to use context#

Good fits:

• Theme, locale/language, current user/session, feature flags
• Values used by a group of components in one area (a form's state, a tabs component's active tab)
• Dependencies like an API client or a router

Before reaching for context, consider:

• Passing props — a few levels of explicit props is fine and easy to trace.
• Composition — pass components as children so intermediate components don't need the data at all:

// Instead of drilling `user` through Layout, pass the finished piece down:
<Layout sidebar={<UserMenu user={user} />}>
  <Dashboard user={user} />
</Layout>

Common mistakes#

• Using useContext in a component that isn't inside the provider and getting the default value (often null).
• Creating a new value object on every render without useMemo.
• Putting everything into one giant "AppContext".
• Reaching for context when two levels of props would do.

What's next#

Next: useReducer — a structured way to manage complex state, which pairs beautifully with context.