Passing data deeply with context

A theme that every level has to pass along

A shop lets you pick light or dark buttons. The choice lives in App, at the top, but the buttons sit four components down. With props, the only way to get it there is to hand it from each component to the next. Tick Dark buttons in the result:

1import { useState } from "react";2 3export default function App() {4  const [theme, setTheme] = useState("light");5 6  return (7    <>8      <label>9        <input type="checkbox" checked={theme === "dark"}10          onChange={(e) => setTheme(e.target.checked ? "dark" : "light")} />11        Dark buttons12      </label>13      <ShopPage theme={theme} />14    </>15  );16}17 18function ShopPage({ theme }) {19  return (20    <main>21      <h3>Tea shop</h3>22      <ProductList theme={theme} />23    </main>24  );25}26 27function ProductList({ theme }) {28  return (29    <ul>30      <ProductCard name="Green tea" theme={theme} />31      <ProductCard name="Chai" theme={theme} />32    </ul>33  );34}35 36function ProductCard({ name, theme }) {37  return (38    <li>39      {name} <AddButton theme={theme} />40    </li>41  );42}43 44function AddButton({ theme }) {45  return <button className={theme}>Add to cart</button>;46}

Line 4 keeps theme in App's state, and lines 9 and 10 switch it with the checkbox. Line 13 passes it to ShopPage, which passes it to ProductList on line 22, which passes it to each ProductCard on lines 30 and 31, which passes it to AddButton on line 39. Only line 45 uses it, to pick the button's className; the styles are in the styles.css tab.

It works, but three of the five components take a theme prop they never use, only to pass it on. This is called prop drilling. React has a way to skip the middle: context. A component high in the tree provides a value, and any component below it, however deep, reads it directly.

The problem with passing props through every level

Passing props is React's normal way to move data down, and most of the time it's the right way: you can read any component and see exactly what it gets. Drilling becomes a problem when a value has to go deep, or to many places, through components that don't care about it. In the shop above:

• ShopPage, ProductList, and ProductCard each list theme in their props (lines 18, 27, and 36), and each hands it on. If the header later needs the theme too, every component on the way to it needs a new prop.
• Renaming theme means editing all five components, even though only one of them uses it.
• Moving AddButton somewhere else in the tree means building a new path of props to its new place.

Drilling often grows out of lifting state up: once state moves to a common parent near the top, every component that needs it is far away. How to read the table: each row is one change to the shop, and what it costs with props and with context.

The next three steps replace the drilled prop with context: create it, read it, and provide it.

Step 1: create a context

A context is made once, outside any component, with createContext. Most apps put it in its own file, so the component that provides it and the components that read it can all import it. This file is the ThemeContext.js tab in every example below; it only runs as part of them:

import { createContext } from "react";

export const ThemeContext = createContext("light");

Line 1 imports createContext from React. Line 3 calls it and exports what it returns as ThemeContext. Two things to know about that line:

• The context object, ThemeContext, doesn't hold the current theme. It's a name both sides agree on: a provider says "here is the value for ThemeContext", and a reader asks "what is ThemeContext here?".
• The argument, "light", is the default value. A component gets it only when there is no provider for ThemeContext anywhere above it. It never changes. Use null when there's no sensible default, like the signed-in user.

Step 2: read it with useContext or use

A component reads a context by passing the context object to useContext. Here a button reads the theme, and nothing provides one yet:

1import { useContext } from "react";2import { ThemeContext } from "./ThemeContext.js";3 4export default function App() {5  return (6    <ul>7      <li>8        Green tea <AddButton />9      </li>10    </ul>11  );12}13 14function AddButton() {15  const theme = useContext(ThemeContext);16  return <button className={theme}>Add to cart ({theme})</button>;17}

Line 2 imports ThemeContext from its file. Line 15 calls useContext(ThemeContext) and names the result theme. Line 16 uses it for the class and the label. The button says Add to cart (light): React looked up the tree for a ThemeContext provider, found none, and returned the default from createContext("light"). There is no error and no warning, so a forgotten provider can go unnoticed; Exercise 2 has one.

useContext is a hook, so it follows the rules from State: call it at the top level of the component, not inside an if or after an early return. React 19 added a second way to read a context, use, which doesn't have that limit. Here, a sold-out product returns early, and only an available one reads the theme:

1import { use } from "react";2import { ThemeContext } from "./ThemeContext.js";3 4export default function App() {5  return (6    <ThemeContext value="dark">7      <ul>8        <li>Green tea <AddButton soldOut={false} /></li>9        <li>Chai <AddButton soldOut={true} /></li>10      </ul>11    </ThemeContext>12  );13}14 15function AddButton({ soldOut }) {16  if (soldOut) {17    return <span>Sold out</span>;18  }19  const theme = use(ThemeContext);20  return <button className={theme}>Add to cart ({theme})</button>;21}

Lines 16 to 18 return Sold out for Chai. Line 19 runs only for Green tea, and calls use(ThemeContext) after that early return, which useContext isn't allowed to do. Line 6 provides "dark", so Green tea's button says Add to cart (dark). Step 3 explains that line.

How to read the table: each row is one question, with the answer for each way of reading a context.

For a context, both return the same value: the nearest provider's, or the default. use can also read a Promise, which The use API lesson covers. This lesson uses useContext where a component reads at the top level, as most code you'll read does, and use where the read comes after a condition.

Step 3: provide a value from a parent

To give the components below a value, render the context object itself as a component, with a value prop, around them. That's a provider. Here is the overview's shop with context. Tick Dark buttons: both buttons change, and no component in the middle mentions the theme.

1import { useContext, useState } from "react";2import { ThemeContext } from "./ThemeContext.js";3 4export default function App() {5  const [theme, setTheme] = useState("light");6 7  return (8    <ThemeContext value={theme}>9      <label>10        <input type="checkbox" checked={theme === "dark"}11          onChange={(e) => setTheme(e.target.checked ? "dark" : "light")} />12        Dark buttons13      </label>14      <ShopPage />15    </ThemeContext>16  );17}18 19function ShopPage() {20  return (21    <main>22      <h3>Tea shop</h3>23      <ProductList />24    </main>25  );26}27 28function ProductList() {29  return (30    <ul>31      <ProductCard name="Green tea" />32      <ProductCard name="Chai" />33    </ul>34  );35}36 37function ProductCard({ name }) {38  return (39    <li>40      {name} <AddButton />41    </li>42  );43}44 45function AddButton() {46  const theme = useContext(ThemeContext);47  return <button className={theme}>Add to cart</button>;48}

Line 8 opens <ThemeContext value={theme}> and line 15 closes it. Everything between them, and everything those components render, however deep, can read theme. ShopPage, ProductList, and ProductCard (lines 19 to 43) no longer take or pass a theme prop. AddButton reads it on line 46.

When you tick the box, setTheme gives App a new theme, and line 8 provides the new value. React renders again every component that reads ThemeContext, so both buttons turn dark. A context isn't only for values that never change: put state in the value, and the readers follow it.

Providers in code written before React 19

Rendering <ThemeContext> directly as a provider is new in React 19. Before that, and in much of the code you'll read today, a provider is written with .Provider:

<ThemeContext.Provider value={theme}>
  <ShopPage />
</ThemeContext.Provider>

It means exactly the same thing, and still works in React 19. The React team has said it will deprecate .Provider in a future version, so write new providers as <ThemeContext value={…}>.

The nearest provider wins

A provider can sit inside another provider of the same context. A component reads the nearest one above it. That lets you override a value for one part of the page. This page is light, but its promo box is always dark. Press Switch page theme a few times:

1import { useContext, useState } from "react";2import { ThemeContext } from "./ThemeContext.js";3 4export default function App() {5  const [theme, setTheme] = useState("light");6 7  return (8    <ThemeContext value={theme}>9      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>10        Switch page theme11      </button>12      <p>13        Green tea <AddButton />14      </p>15      <section className="promo">16        <ThemeContext value="dark">17          <p>18            Today only: Chai <AddButton />19          </p>20        </ThemeContext>21      </section>22    </ThemeContext>23  );24}25 26function AddButton() {27  const theme = useContext(ThemeContext);28  return <button className={theme}>Add to cart ({theme})</button>;29}

Line 8 provides the page's theme to everything inside it. Lines 16 to 20 put a second provider, with the value "dark", around the promo. The Green tea button on line 13 has one provider above it, and follows the switch: light, then dark. The Chai button on line 18 has two, and reads the nearer one on line 16, so it says dark whatever the page theme is.

Try it with the providers switched on and off. The playground renders both buttons with real context. Choose a value for each provider, or none to take it out, and read what each button gets and from where.

const ThemeContext = createContext("light");

function Page() {
  return (
    <ThemeContext value="light">
      <header>
        Green tea <AddButton />
      </header>
      <section>
        <ThemeContext value="dark">
          Chai <AddButton />
        </ThemeContext>
      </section>
    </ThemeContext>
  );
}

Take the promo provider out, and Chai reads the page's value like Green tea. Take both out, and both buttons fall back to the default, "light". Each context is separate, too: a provider of ThemeContext never hides the value of another context, such as a UserContext.

Every reader renders again when the value changes

When a provider's value changes, React renders again every component below it that reads that context. To see it, each component in this shop shows how many times it has rendered. The counter comes from the RenderCount.jsx tab; you don't need to read it to use it. Press Switch theme twice:

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const ThemeContext = createContext("light");5 6function ThemeSwitch({ children }) {7  const [theme, setTheme] = useState("light");8 9  return (10    <ThemeContext value={theme}>11      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>12        Switch theme13      </button>14      {children}15    </ThemeContext>16  );17}18 19function Header() {20  return <h3>Tea shop <RenderCount /></h3>;21}22 23function ThemeLabel() {24  const theme = useContext(ThemeContext);25  return <p>Theme: {theme} <RenderCount /></p>;26}27 28function ProductList() {29  return (30    <section>31      <p>Products <RenderCount /></p>32      <AddButton />33    </section>34  );35}36 37function AddButton() {38  const theme = useContext(ThemeContext);39  return <button className={theme}>Add to cart <RenderCount /></button>;40}41 42export default function App() {43  return (44    <ThemeSwitch>45      <Header />46      <ThemeLabel />47      <ProductList />48    </ThemeSwitch>49  );50}

ThemeSwitch (lines 6 to 17) keeps the theme in state and provides it on line 10. ThemeLabel (line 24) and AddButton (line 38) read it. Header and ProductList don't. After two clicks, Theme: light and Add to cart say renders: 3, while Tea shop and Products still say renders: 1.

Why do Header and ProductList stay at 1? App made them, on lines 45 to 47, and passed them to ThemeSwitch as children. When the theme changes, only ThemeSwitch renders again; its children are the same as last time, so React doesn't call them. But it does call every component that reads the context, even AddButton, deep inside ProductList, which didn't render.

React decides whether the value changed by comparing the old and new value with Object.is. A string like "dark" compares by its text. An object compares by identity: if a provider gets a new object, like value={{ theme, user }} written in the component, every reader renders again, even one that only uses user and even when nothing in it changed.

For most apps, this costs nothing you would notice: a theme or a signed-in user changes rarely. When it does matter, there are tools for it, like splitting one big context into several, which the next lesson does, and reading the context lower down, which When React re-renders covers. Press Edit & run and add useContext(ThemeContext); as the first line of Header: it now reads the context, and its counter follows the clicks.

Before you reach for context

Context is easy to overuse. A value passed through two or three components is often clearer as props, because each component shows what it gets. Before you add a context, try these two things first:

1. Pass props. Many props through several components is normal, and the data flow stays easy to follow.
2. Pass JSX as children. If components in the middle only place the data on the page, let them take children, and give the data to the component that needs it directly.

Here, a list of teas passes through a Layout and a Main that only pass it on:

1const teas = ["Green tea", "Chai", "Mint tea"];2 3export default function App() {4  return <Layout teas={teas} />;5}6 7function Layout({ teas }) {8  return (9    <div className="layout">10      <h3>Tea shop</h3>11      <Main teas={teas} />12    </div>13  );14}15 16function Main({ teas }) {17  return (18    <main>19      <TeaList teas={teas} />20    </main>21  );22}23 24function TeaList({ teas }) {25  return <p>{teas.length} teas: {teas.join(", ")}</p>;26}

Line 4 hands teas to Layout, line 11 hands it to Main, and line 19 to TeaList, the only component that uses it. Now the same page with children:

1const teas = ["Green tea", "Chai", "Mint tea"];2 3export default function App() {4  return (5    <Layout>6      <Main>7        <TeaList teas={teas} />8      </Main>9    </Layout>10  );11}12 13function Layout({ children }) {14  return (15    <div className="layout">16      <h3>Tea shop</h3>17      {children}18    </div>19  );20}21 22function Main({ children }) {23  return <main>{children}</main>;24}25 26function TeaList({ teas }) {27  return <p>{teas.length} teas: {teas.join(", ")}</p>;28}

Lines 5 to 9 put TeaList inside Main inside Layout, right in App, and give it teas on line 7. Layout and Main show whatever children they get (lines 17 and 23) and know nothing about teas. The result is the same: 3 teas: Green tea, Chai, Mint tea.

Context is the right tool when many components in different parts of the tree need the same value. Common cases:

• A theme, or other display settings like a language, that buttons and cards all over the page read.
• The signed-in user, read by the header, the cart, and a review form.
• The current page address: routing libraries keep it in a context, so every link can tell whether it's the active one.
• State managed near the top that far-away components need to read and change. The next lesson combines a reducer with context for this.

A shop with a theme and a signed-in user

Real apps often have a few contexts side by side. This shop has two: the theme, and the signed-in user. Press Sign in, then Switch theme, then Sign out.

1import { use, useState } from "react";2import { ThemeContext, UserContext } from "./contexts.js";3 4export default function App() {5  const [theme, setTheme] = useState("light");6  const [user, setUser] = useState(null);7 8  return (9    <ThemeContext value={theme}>10      <UserContext value={user}>11        <Header12          onSwitchTheme={() => setTheme(theme === "light" ? "dark" : "light")}13          onSignIn={() => setUser({ name: "Asha" })}14          onSignOut={() => setUser(null)}15        />16        <p>17          Green tea <AddButton />18        </p>19        <ThemeContext value="dark">20          <footer>21            Need help? <AddButton label="Chat with us" />22          </footer>23        </ThemeContext>24      </UserContext>25    </ThemeContext>26  );27}28 29function Header({ onSwitchTheme, onSignIn, onSignOut }) {30  const user = use(UserContext);31 32  return (33    <header>34      <button onClick={onSwitchTheme}>Switch theme</button>{" "}35      {user ? (36        <>37          Hi, {user.name} <button onClick={onSignOut}>Sign out</button>38        </>39      ) : (40        <button onClick={onSignIn}>Sign in</button>41      )}42    </header>43  );44}45 46function AddButton({ label = "Add to cart" }) {47  const theme = use(ThemeContext);48  const user = use(UserContext);49  return (50    <button className={theme} disabled={!user}>51      {user ? label : "Sign in to " + label.toLowerCase()}52    </button>53  );54}

The contexts.js tab creates both: ThemeContext with the default "light", and UserContext with null, for nobody signed in. App keeps both in state (lines 5 and 6) and provides them on lines 9 and 10. The header's buttons call functions App passes as props on lines 12 to 14, because App owns the state; the next lesson shows how to change state through context instead.

• Header reads the user on line 30 and shows Hi, Asha with a Sign out button, or a Sign in button.
• AddButton reads both contexts on lines 47 and 48. While nobody is signed in, it's turned off and says Sign in to add to cart.
• Lines 19 to 23 override the theme for the footer, so its button stays dark while the page switches. The footer's button still reads the user from line 10: overriding one context leaves the other alone.

Common mix-ups

• "The context object holds the value." No. ThemeContext is only a name both sides share. The value comes from the nearest provider, or the default.
• "Forgetting the provider causes an error." No. The reader quietly gets the default value, like the button that said light with no provider.
• "A component can read the value it provides." No. useContext looks for providers above the component. A provider in the same component's output only reaches its children.
• "Context replaces props." No. Props are still the normal way to pass data. Context is for values many components far apart need.
• "Only components that use part of the value render again." No. When the value changes, every component that reads that context renders again.
• "You need .Provider to provide a context." Not in React 19. Render <ThemeContext value={…}> directly; .Provider is the older form.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run, and updates as you type. Guess first, then use the hints.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

export default function App() {
  return (
    <>
      <Label place="Header" />
      <ThemeContext value="dark">
        <Label place="Page" />
        <ThemeContext value="light">
          <Label place="Banner" />
        </ThemeContext>
        <Label place="Footer" />
      </ThemeContext>
    </>
  );
}

function Label({ place }) {
  const theme = useContext(ThemeContext);
  return <p>{place}: {theme}</p>;
}

1import { createContext, useContext } from "react";2 3const ThemeContext = createContext("light");4 5export default function App() {6  return (7    <>8      <Label place="Header" />9      <ThemeContext value="dark">10        <Label place="Page" />11        <ThemeContext value="light">12          <Label place="Banner" />13        </ThemeContext>14        <Label place="Footer" />15      </ThemeContext>16    </>17  );18}19 20function Label({ place }) {21  const theme = useContext(ThemeContext);22  return <p>{place}: {theme}</p>;23}

1import { createContext, useContext, useState } from "react";2 3const ThemeContext = createContext("light");4 5export default function App() {6  const [theme, setTheme] = useState("dark");7 8  return (9    <>10      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>11        Switch theme12      </button>13      <Toolbar />14    </>15  );16}17 18function Toolbar() {19  return (20    <p>21      <ThemeButton />22    </p>23  );24}25 26function ThemeButton() {27  const theme = useContext(ThemeContext);28  return <button className={theme}>Theme: {theme}</button>;29}

1import { createContext, useContext, useState } from "react";2 3const ThemeContext = createContext("light");4 5export default function App() {6  const [theme, setTheme] = useState("dark");7 8  return (9    <ThemeContext value={theme}>10      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>11        Switch theme12      </button>13      <Toolbar />14    </ThemeContext>15  );16}17 18function Toolbar() {19  return (20    <p>21      <ThemeButton />22    </p>23  );24}25 26function ThemeButton() {27  const theme = useContext(ThemeContext);28  return <button className={theme}>Theme: {theme}</button>;29}

1const user = { name: "Asha" };2 3export default function App() {4  return <Page user={user} />;5}6 7function Page({ user }) {8  return (9    <main>10      <Sidebar user={user} />11    </main>12  );13}14 15function Sidebar({ user }) {16  return (17    <aside>18      <Greeting user={user} />19    </aside>20  );21}22 23function Greeting({ user }) {24  return <p>Hi, {user.name}</p>;25}

1import { createContext, useContext } from "react";2 3const UserContext = createContext(null);4const user = { name: "Asha" };5 6export default function App() {7  return (8    <UserContext value={user}>9      <Page />10    </UserContext>11  );12}13 14function Page() {15  return (16    <main>17      <Sidebar />18    </main>19  );20}21 22function Sidebar() {23  return (24    <aside>25      <Greeting />26    </aside>27  );28}29 30function Greeting() {31  const user = useContext(UserContext);32  return <p>Hi, {user.name}</p>;33}

1import { createContext, useContext } from "react";2 3const ThemeContext = createContext("light");4 5export default function App() {6  return (7    <ThemeContext value="light">8      <p>9        Green tea <ThemeButton label="Add to cart" />10      </p>11      <footer>12        <ThemeButton label="Contact us" />13      </footer>14    </ThemeContext>15  );16}17 18function ThemeButton({ label }) {19  const theme = useContext(ThemeContext);20  return <button className={theme}>{label} ({theme})</button>;21}

1import { createContext, useContext } from "react";2 3const ThemeContext = createContext("light");4 5export default function App() {6  return (7    <ThemeContext value="light">8      <p>9        Green tea <ThemeButton label="Add to cart" />10      </p>11      <ThemeContext value="dark">12        <footer>13          <ThemeButton label="Contact us" />14        </footer>15      </ThemeContext>16    </ThemeContext>17  );18}19 20function ThemeButton({ label }) {21  const theme = useContext(ThemeContext);22  return <button className={theme}>{label} ({theme})</button>;23}

1import { createContext, useContext } from "react";2 3const DepthContext = createContext(0);4 5const thread = {6  text: "Is this tea strong?",7  replies: [8    {9      text: "Quite strong.",10      replies: [{ text: "Add milk, then.", replies: [] }],11    },12  ],13};14 15export default function App() {16  return <Comment comment={thread} />;17}18 19function Comment({ comment }) {20  const depth = useContext(DepthContext);21 22  return (23    <div style={{ marginLeft: depth * 16 }}>24      <p>25        {comment.text} (depth {depth})26      </p>27      {comment.replies.map((reply) => (28        <Comment key={reply.text} comment={reply} />29      ))}30    </div>31  );32}

1import { createContext, useContext } from "react";2 3const DepthContext = createContext(0);4 5const thread = {6  text: "Is this tea strong?",7  replies: [8    {9      text: "Quite strong.",10      replies: [{ text: "Add milk, then.", replies: [] }],11    },12  ],13};14 15export default function App() {16  return <Comment comment={thread} />;17}18 19function Comment({ comment }) {20  const depth = useContext(DepthContext);21 22  return (23    <div style={{ marginLeft: depth * 16 }}>24      <p>25        {comment.text} (depth {depth})26      </p>27      <DepthContext value={depth + 1}>28        {comment.replies.map((reply) => (29          <Comment key={reply.text} comment={reply} />30        ))}31      </DepthContext>32    </div>33  );34}

1const teas = ["Green tea", "Chai", "Mint tea"];2 3export default function App() {4  return <Layout teas={teas} />;5}6 7function Layout({ teas }) {8  return (9    <div className="layout">10      <h3>Tea shop</h3>11      <Main teas={teas} />12    </div>13  );14}15 16function Main({ teas }) {17  return (18    <main>19      <TeaList teas={teas} />20    </main>21  );22}23 24function TeaList({ teas }) {25  return <p>{teas.length} teas: {teas.join(", ")}</p>;26}

1const teas = ["Green tea", "Chai", "Mint tea"];2 3export default function App() {4  return (5    <Layout>6      <Main>7        <TeaList teas={teas} />8      </Main>9    </Layout>10  );11}12 13function Layout({ children }) {14  return (15    <div className="layout">16      <h3>Tea shop</h3>17      {children}18    </div>19  );20}21 22function Main({ children }) {23  return <main>{children}</main>;24}25 26function TeaList({ teas }) {27  return <p>{teas.length} teas: {teas.join(", ")}</p>;28}

Check your understanding

For each code question, find the reader, then walk up the tree to the first provider of that context. Press Edit & run on a question's code to check your answer.

Key takeaways

• Prop drilling is passing a prop through components that only hand it on. Context lets a value skip them.
• createContext(defaultValue) makes the context object, outside any component. The object holds no value; the default is used only when no provider is above.
• Provide a value with <ThemeContext value={…}> (React 19; older code uses .Provider). Read it with useContext(ThemeContext) at the top level, or use(ThemeContext), which also works after an early return or inside an if.
• A component reads the nearest provider above it, so a provider inside another overrides the value for its part of the tree.
• When the value changes, every component that reads the context renders again. Before using context, try props, or passing JSX as children.

Coming next: Scaling up with a reducer and context. It puts a reducer's state and its dispatch in context, so any component on the screen can read the state and send actions.