Context

What you'll learn

What "prop drilling" is, how createContext, a Provider and useContext solve it, and when context is the right tool.

Why it matters

Some data is needed all over an app: the logged-in user, the theme, the language. Passing it as a prop through ten layers of components that do not use it is tedious and fragile. Context makes it available directly to whoever needs it.

Explanation

Prop drilling is passing a prop through components that do not need it, just to reach a deep child. Context removes that.

Three steps:

1. Create a context: const ThemeContext = createContext("light"); The argument is a default value.
2. Provide a value high in the tree: <ThemeContext.Provider value={theme}> ... </ThemeContext.Provider>. Every component below can access it.
3. Consume it anywhere below: const theme = useContext(ThemeContext);

When the provided value changes, every component that uses it re-renders.

Context is great for data that changes rarely and is needed widely (theme, user, language). For fast-changing or complex data, consider a state library, and keep local state local.

You often combine context with state: the provider component holds the state and provides both the value and a function to change it.

Example

Step-by-step walkthrough

1. createContext(null) makes the context object.
2. ThemeProvider keeps dark in state and provides an object with the value and a toggle function.
3. Layout sits in the middle and passes nothing down. It does not know about the theme.
4. ThemeButton and Card call useContext and receive the provided value directly.
5. Clicking the button updates the provider's state, and every consumer re-renders with the new theme: the card changes colour.

Try it yourself

Press the button in the preview. Then add a language setting to the context value, such as lang: "en", and show it in Card.

ContextReact

Editable codeconst ThemeContext = createContext(null); function ThemeProvider({ children }) { const [dark, setDark] = useState(false); const value = { dark, toggle: () => setDark(!dark) }; return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>; } function ThemeButton() { const { dark, toggle } = useContext(ThemeContext); return <button onClick={toggle}>Switch to {dark ? "light" : "dark"} mode</button>; } function Card() { const { dark } = useContext(ThemeContext); const style = { padding: 16, borderRadius: 8, marginTop: 12, background: dark ? "#1e293b" : "#f1f5f9", color: dark ? "#f8fafc" : "#0f172a", }; return <div style={style}>I read the theme from context.</div>; } function Layout() { return ( <div> <ThemeButton /> <Card /> </div> ); } function App() { return ( <ThemeProvider> <Layout /> </ThemeProvider> ); }

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using useContext outside a Provider, which returns the default value (here null) and crashes on destructuring.
• Putting everything in one giant context, so every consumer re-renders for any change.
• Using context for rapidly changing values such as mouse position.
• Creating a new object on every render for the provider value when it is expensive. Memoise it with useMemo.

Quick quiz

Summary

• createContext, Provider and useContext share data without prop drilling.
• Pair a provider with state to share values and updaters.
• Use it for widely needed, slowly changing data.

Next: put everything together in a small project.

const ThemeContext = createContext(null);

function ThemeProvider({ children }) {
  const [dark, setDark] = useState(false);
  const value = { dark, toggle: () => setDark(!dark) };
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

function ThemeButton() {
  const { dark, toggle } = useContext(ThemeContext);
  return <button onClick={toggle}>Switch to {dark ? "light" : "dark"} mode</button>;
}

function Card() {
  const { dark } = useContext(ThemeContext);
  const style = {
    padding: 16,
    borderRadius: 8,
    marginTop: 12,
    background: dark ? "#1e293b" : "#f1f5f9",
    color: dark ? "#f8fafc" : "#0f172a",
  };
  return <div style={style}>I read the theme from context.</div>;
}

function Layout() {
  // Layout does not know about the theme at all.
  return (
    <div>
      <ThemeButton />
      <Card />
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <Layout />
    </ThemeProvider>
  );
}