Understanding the Context API and the useContext Hook

Some values are needed by many components at once: the current color theme, the signed-in user, or the language of the interface. When such a value lives in a component near the top of the tree, every component between it and the reader must accept the value as a prop and pass it on, even when that component never uses it. React Fundamentals called this prop drilling.

The Context API removes those intermediate props. A component near the top provides a value, and any component below it, at any depth, can read that value directly. The value is called a context, and the component that supplies it is called a provider.

This chapter uses one running example: a small store page with a light or dark theme and, later, a shopping cart. This lesson introduces the three parts of the Context API on the theme.

The Problem Context Solves

Here is the theme passed with props. Only ThemeButton uses it, but Page and Toolbar must both accept and forward it.

function App() {
  const theme = 'dark';
  return <Page theme={theme} />;
}

function Page({ theme }) {
  return <Toolbar theme={theme} />;
}

function Toolbar({ theme }) {
  return <ThemeButton theme={theme} />;
}

function ThemeButton({ theme }) {
  return <button className={theme}>Save</button>;
}

With three levels this is manageable. With ten levels, or with five different components that need the theme in different branches, every new reader of the value means another chain of props to edit. Context lets ThemeButton ask for the theme without Page and Toolbar knowing about it.

Part 1: Creating a Context

You create a context with createContext, usually in its own file so that every component that needs it can import it.

import { createContext } from 'react';

export const ThemeContext = createContext('light');

The argument is the default value. React uses it only when a component reads the context and there is no provider anywhere above it. It is a fallback that never changes. If there is no sensible default, pass null.

Part 2: Providing a Value

A provider wraps part of the tree and gives the context a value for everything inside it. In React 19 you render the context object itself as the provider and pass a value prop:

import { ThemeContext } from './ThemeContext';

function App() {
  return (
    <ThemeContext value="dark">
      <Page />
    </ThemeContext>
  );
}

Code written before React 19 uses <ThemeContext.Provider value="dark"> instead. That form still works in React 19 and does exactly the same thing, so you will meet it often in existing projects. New code can use the shorter form.

The prop must be named value. A provider with no value prop gives its children undefined, not the default value, and React prints a warning. This is what our run printed for <ThemeContext><Label /></ThemeContext>:

The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?
provider with no value prop: "theme is "

Part 3: Reading the Value

A component reads the nearest provider's value with the useContext hook. Page and Toolbar no longer mention the theme at all:

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Page() {
  return <Toolbar />;
}

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Save</button>;
}

The diagram shows the same tree with the value moving from the provider straight to the component that reads it.