How to Use the Context API and the useContext Hook

What does it take for a button in one corner of the page to change the colors of a component in another corner? With context, the answer is three small pieces: a context object, a provider whose value comes from state, and the components that read it. This lesson builds that theme toggle for the store page, one file at a time, and then follows a single click through React.

Step 1: Create the Context in Its Own File

// ThemeContext.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');

The context lives in its own module and is exported. Every component that provides or reads the theme imports this one object. If two files each called createContext, they would create two unrelated contexts, and a component reading one would never see the other's provider.

Step 2: Provide a Value That Comes from State

The theme must be able to change, so it lives in state. App owns that state and passes it to the provider as value:

// App.jsx
import { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import Page from './Page';

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

  function handleToggleClick() {
    setTheme((current) => (current === 'light' ? 'dark' : 'light'));
  }

  return (
    <ThemeContext value={theme}>
      <button onClick={handleToggleClick}>Toggle theme</button>
      <Page />
    </ThemeContext>
  );
}

The update uses the updater form, setTheme((current) => ...), so the new theme is always computed from the latest state. The toggle button is inside App, next to the state it changes.

Step 3: Read the Value Where It Is Needed

Two components read the theme. ThemeButton sits two levels down inside Toolbar, and ThemeLabel sits directly inside Page:

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

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

function ThemeLabel() {
  const theme = useContext(ThemeContext);
  return <p>The theme is currently: {theme}</p>;
}

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

export default function Page() {
  return (
    <main>
      <Toolbar />
      <ThemeLabel />
    </main>
  );
}

Neither Page nor Toolbar receives a theme prop. In a real project, the className would select light or dark styles from a stylesheet.

What Happens When You Click

We rendered App, clicked "Toggle theme" once, and printed the screen text and the class on the Save button:

initial: The theme is currently: light | Save (light)
after click: The theme is currently: dark | Save (dark) class= dark

The click starts a short sequence of events:

1. handleToggleClick calls setTheme, and React schedules a re-render of App.
2. App renders again with theme equal to "dark" and gives the provider the new value.
3. React compares the provider's old value with the new one using Object.is. The strings "light" and "dark" differ, so the context has changed.
4. React re-renders every component below the provider that reads ThemeContext, here ThemeButton and ThemeLabel, and they return markup with "dark".
5. React updates the button text, its class, and the label in the DOM.