Scaling up with a reducer and context

A cart that every part of the shop needs

A shop screen has a cart badge in the header, Add buttons on every product, and later a cart panel with Remove buttons. They all need the same cart. A reducer keeps the cart's update rules in one function, and useReducer gives you the cart and dispatch, the function that sends the reducer an action. Here they live in App and travel down as props. Click both Add buttons in the result:

1import { useReducer } from "react";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6];7 8function cartReducer(cart, action) {9  switch (action.type) {10    case "added":11      return [...cart, action.tea];12    default:13      throw Error("Unknown action: " + action.type);14  }15}16 17function CartBadge({ cart }) {18  return <p>Cart: {cart.length}</p>;19}20 21function Header({ cart }) {22  return (23    <header>24      <h2>Tea Corner</h2>25      <CartBadge cart={cart} />26    </header>27  );28}29 30function ProductCard({ tea, dispatch }) {31  return (32    <li>33      {tea.name}: ${tea.price}{" "}34      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>35    </li>36  );37}38 39function ProductList({ dispatch }) {40  return (41    <ul>42      {teas.map((tea) => (43        <ProductCard key={tea.id} tea={tea} dispatch={dispatch} />44      ))}45    </ul>46  );47}48 49export default function App() {50  const [cart, dispatch] = useReducer(cartReducer, []);51  return (52    <>53      <Header cart={cart} />54      <ProductList dispatch={dispatch} />55    </>56  );57}

Lines 8 to 15 are the reducer: for an added action, it returns a new array with the tea at the end. Line 50 creates the cart, starting empty, and dispatch. Line 53 passes the cart to Header, which passes it on to CartBadge on line 25. Line 54 passes dispatch to ProductList, which passes it on to each ProductCard on line 43. The click on line 34 sends { type: "added", tea }, and the badge on line 18 counts the cart: after two clicks, Cart: 2.

It works, but look at Header and ProductList. Neither uses the cart or dispatch; they take them only to hand them on. That's called prop drilling. With a real screen, ten layers deep, every layer in between would carry props it never uses, and moving a component means rewiring them all.

You've met both tools already. A reducer gathers the state's update rules, and context lets a component provide a value to every component below it, however deep. The two lessons before this one, Extracting state logic into a reducer and Passing data deeply with context, teach each on its own. Put together, the component with the reducer provides the cart and dispatch in context, and any component below reads what it needs:

Putting the cart and dispatch in context

You can move a reducer's state and dispatch into context in three steps.

Step 1: create two contexts. One carries the cart, the other carries dispatch. They live in their own file, so any component file can import them. This example has two files, in tabs: App.jsx and CartContext.js. In CartContext.js, lines 3 and 4 create the two contexts with createContext(null). The null is the default value, used only by a component that has no provider above it.

1import { useContext, useReducer } from "react";2import { CartContext, CartDispatchContext } from "./CartContext.js";3 4const teas = [5  { id: "sencha", name: "Sencha", price: 4 },6  { id: "assam", name: "Assam", price: 3 },7];8 9function cartReducer(cart, action) {10  switch (action.type) {11    case "added":12      return [...cart, action.tea];13    default:14      throw Error("Unknown action: " + action.type);15  }16}17 18function CartBadge() {19  const cart = useContext(CartContext);20  return <p>Cart: {cart.length}</p>;21}22 23function Header() {24  return (25    <header>26      <h2>Tea Corner</h2>27      <CartBadge />28    </header>29  );30}31 32function ProductCard({ tea }) {33  const dispatch = useContext(CartDispatchContext);34  return (35    <li>36      {tea.name}: ${tea.price}{" "}37      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>38    </li>39  );40}41 42function ProductList() {43  return (44    <ul>45      {teas.map((tea) => (46        <ProductCard key={tea.id} tea={tea} />47      ))}48    </ul>49  );50}51 52export default function App() {53  const [cart, dispatch] = useReducer(cartReducer, []);54  return (55    <CartContext value={cart}>56      <CartDispatchContext value={dispatch}>57        <Header />58        <ProductList />59      </CartDispatchContext>60    </CartContext>61  );62}

Step 2: provide them. In App.jsx, line 53 still calls useReducer. Lines 55 and 56 wrap the screen in both contexts: <CartContext value={cart}> gives every component inside the current cart, and <CartDispatchContext value={dispatch}> gives them dispatch.

Step 3: read them where they're needed. Line 19 reads the cart in CartBadge with useContext(CartContext), and line 33 reads dispatch in ProductCard. useContext finds the closest provider above the component and returns its value. Now Header (lines 23 to 30) and ProductList (lines 42 to 50) take no props at all. Click both Add buttons: Cart: 2, the same as before.

The state still lives in App, in its useReducer. Context changes only how it travels. How to read the table: each row asks one question, answered for props and for context.

How an action travels through the screen

With the cart in context, data still flows one way. The cart goes down from the provider to the components that read it. An action goes up: a component calls dispatch, React runs the reducer with the current cart and the action, and the reducer returns the next cart. Then the provider renders with it, and every component that reads the cart renders again.

Try it on a whole shop screen. It has three products and a cart panel whose buttons remove one tea or empty the cart. Three different components send actions, and they all go to the same reducer:

Press Add Sencha and Add Assam: ProductCard sends two added actions, and the cart becomes [Sencha, Assam]. Press Remove Sencha in the panel: CartPanel sends { type: "removed", index: 0 }, and the cart is [Assam]. Neither component knows the other exists. They both know only dispatch, and the reducer decides what each action does to the cart.

Moving the wiring into a CartProvider

App still does a lot: it calls useReducer and nests two providers around the screen. You can move all of that into one component, CartProvider, in the contexts' file. Open the CartContext.jsx tab:

1import { useContext } from "react";2import { CartContext, CartDispatchContext, CartProvider } from "./CartContext.jsx";3 4const teas = [5  { id: "sencha", name: "Sencha", price: 4 },6  { id: "assam", name: "Assam", price: 3 },7];8 9function CartBadge() {10  const cart = useContext(CartContext);11  return <p>Cart: {cart.length}</p>;12}13 14function ProductCard({ tea }) {15  const dispatch = useContext(CartDispatchContext);16  return (17    <li>18      {tea.name}: ${tea.price}{" "}19      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>20    </li>21  );22}23 24export default function App() {25  return (26    <CartProvider>27      <header>28        <h2>Tea Corner</h2>29        <CartBadge />30      </header>31      <ul>32        {teas.map((tea) => (33          <ProductCard key={tea.id} tea={tea} />34        ))}35      </ul>36    </CartProvider>37  );38}

In CartContext.jsx, lines 6 to 15 are CartProvider. It does three jobs:

• Line 7 manages the cart with the reducer, which moved into this file too (lines 17 to 28).
• Lines 9 and 10 provide both contexts.
• Line 11 renders children: whatever App puts between <CartProvider> and </CartProvider>. (Props covers the children prop.)

In App.jsx, line 2 imports CartProvider with the contexts, and App (lines 24 to 38) only wraps the screen in it, from line 26. App has no state and no reducer now. Press Edit & run, open CartContext.jsx, and change the [] on line 7 to [{ id: "mint", name: "Mint tea", price: 5 }]: the badge starts at Cart: 1. Only the provider knows how the cart starts.

Think of CartProvider as the part of the screen that knows how to deal with the cart. The state now lives in CartProvider. Because App renders it near the top, it's still above every component that needs the cart: the same place Sharing state between components taught you to put shared state, the closest common parent.

Custom hooks: useCart and useCartDispatch

Components still import two context objects and call useContext with the right one. You can hide that behind two small functions in the same file, and stop exporting the contexts:

1import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6];7 8function CartBadge() {9  const cart = useCart();10  return <p>Cart: {cart.length}</p>;11}12 13function ProductCard({ tea }) {14  const dispatch = useCartDispatch();15  return (16    <li>17      {tea.name}: ${tea.price}{" "}18      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>19    </li>20  );21}22 23export default function App() {24  return (25    <CartProvider>26      <header>27        <h2>Tea Corner</h2>28        <CartBadge />29      </header>30      <ul>31        {teas.map((tea) => (32          <ProductCard key={tea.id} tea={tea} />33        ))}34      </ul>35    </CartProvider>36  );37}

In CartContext.jsx, lines 3 and 4 create the contexts without export: no other file can reach them now. useCart (lines 17 to 23) reads the cart context and returns the cart. useCartDispatch (lines 25 to 31) does the same for dispatch. In App.jsx, line 9 is now const cart = useCart(); and line 14 is const dispatch = useCartDispatch();. The components say what they need, not where it comes from.

Functions like these are custom hooks: functions you write whose names start with use. The name tells you, and React's linter, that the function calls other hooks, like useContext, so it follows the same rules as they do: call it at the top level of a component, not inside a condition or a loop. A later lesson, Reusing logic with custom hooks, writes many more.

A hook can also check how it's used. Lines 19 to 21 throw an error when the cart is null. That happens only when no CartProvider sits above the component, because null is the default value from createContext(null). Try it: press Edit & run, and in App.jsx change <CartProvider> on line 25 to <> and </CartProvider> on line 35 to </>. The result shows the error, useCart must be used inside a CartProvider, in place of the page. Without the check, the badge would fail with a less helpful TypeError about reading length of null. Put the provider back, and the shop returns.

Why the cart and dispatch get separate contexts

Why two contexts and not one, holding { cart, dispatch }? Both work. The difference is which components render again after an action, and it comes from two facts:

• dispatch never changes. React gives you the same function on every render of CartProvider, for as long as it's on the screen.
• When a provider's value changes, React renders again every component that reads that context, as Passing data deeply with context showed. It compares the old and new value with Object.is, so a new object counts as a change, even if what's inside is the same.

With one context, the value is a new { cart, dispatch } object after every change to the cart, so every reader renders again, even a ProductCard that only dispatches. With two, the dispatch context's value stays the same function, and the components that only dispatch are left alone. Try both. The shop below counts each component's renders:

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, []);
  return (
    <CartContext value={{ cart, dispatch }}>
      {children}
    </CartContext>
  );
}

export function useCart() {
  return useContext(CartContext).cart;
}

export function useCartDispatch() {
  return useContext(CartContext).dispatch;
}

With One context, one Add click renders five components: CartProvider, CartBadge, CartTotal, and both ProductCards. With Two contexts, it's three: the cards are skipped. In both, Header and ProductList stay at 1. They read no context, and they came to CartProvider as children, made by App, which didn't render. So nothing gave them new props.

How to read the table: each row asks one question, answered for one context and for two.

In a small app, the extra renders cost nothing you'd notice, and one context is fine. On a big screen with many components that only send actions, splitting saves real work, and it costs nothing: the hooks hide it. The When React re-renders lesson, in the Performance stage, looks at renders in detail.

A whole shop screen, one component per file

Here is the shop screen as you'd write it in a project: one file per component, and CartContext.jsx holding all the cart's wiring. Click the tabs to read each file, then add a few teas, remove one, and empty the cart:

1import { CartProvider } from "./CartContext.jsx";2import Header from "./Header.jsx";3import ProductList from "./ProductList.jsx";4import CartPanel from "./CartPanel.jsx";5 6export default function App() {7  return (8    <CartProvider>9      <Header />10      <ProductList />11      <CartPanel />12    </CartProvider>13  );14}

App.jsx is only a layout: lines 8 to 12 put Header, ProductList, and CartPanel inside CartProvider. In Header.jsx, line 4 reads the cart for the badge. In ProductList.jsx, line 10 gets dispatch for the Add buttons. CartPanel.jsx needs both: lines 4 and 5. Its Remove buttons send removed with the tea's position on line 15, and Empty cart sends cleared on line 22. Each line in the panel has no state of its own, so its position works as a key here; Rendering lists explains when you need a real id.

None of these files passes the cart around. To add a wish list next to the cart later, you'd write a second pair the same way: a SavedProvider with useSaved and useSavedDispatch. Apps often have several such pairs, each near the top of the part of the screen that needs it. Exercise 5 builds one.

Common mix-ups

• "Context stores the state." No. The state lives in the component that calls useReducer, here CartProvider. Context only carries its value down to the components below.
• "A reducer and context replace props everywhere." No. Props are still the clearest way to give a child its own data, like the tea each ProductCard gets. Use context for state that many distant components share.
• "Every component that calls useCartDispatch renders again after each action." No. With its own context, dispatch never changes, so those components are skipped.
• "A component outside the provider gets the cart anyway." No. It gets the default value from createContext. With null and a check in the hook, you get a clear error instead of a wrong page.
• "Custom hooks are a special React feature." No. They're your own functions. Starting the name with use marks them as calling hooks, so the same rules apply to them.
• "Context is a global variable." No. A component reads the value from the closest provider above it. Two CartProviders on one page would hold two separate carts.

Practice exercises

For each one, find where the state lives and which components read it or send actions. Press Edit & run to change the code; the result updates as you type.

import { createContext, useContext, useReducer } from "react";

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

function cartReducer(cart, action) {
  switch (action.type) {
    case "added":
      return [...cart, action.tea];
    default:
      throw Error("Unknown action: " + action.type);
  }
}

function CartTotal() {
  const cart = useContext(CartContext);
  const total = cart.reduce((sum, tea) => sum + tea.price, 0);
  return <p>Total: ${total}</p>;
}

function AddSencha() {
  const dispatch = useContext(CartDispatchContext);
  const sencha = { id: "sencha", name: "Sencha", price: 4 };
  return <button onClick={() => dispatch({ type: "added", tea: sencha })}>Add Sencha</button>;
}

export default function App() {
  const [cart, dispatch] = useReducer(cartReducer, [
    { id: "mint", name: "Mint tea", price: 5 },
  ]);
  return (
    <CartContext value={cart}>
      <CartDispatchContext value={dispatch}>
        <CartTotal />
        <AddSencha />
      </CartDispatchContext>
    </CartContext>
  );
}

1import { createContext, useContext, useReducer } from "react";2 3const CartContext = createContext(null);4const CartDispatchContext = createContext(null);5 6function cartReducer(cart, action) {7  switch (action.type) {8    case "added":9      return [...cart, action.tea];10    default:11      throw Error("Unknown action: " + action.type);12  }13}14 15function CartTotal() {16  const cart = useContext(CartContext);17  const total = cart.reduce((sum, tea) => sum + tea.price, 0);18  return <p>Total: ${total}</p>;19}20 21function AddSencha() {22  const dispatch = useContext(CartDispatchContext);23  const sencha = { id: "sencha", name: "Sencha", price: 4 };24  return <button onClick={() => dispatch({ type: "added", tea: sencha })}>Add Sencha</button>;25}26 27export default function App() {28  const [cart, dispatch] = useReducer(cartReducer, [29    { id: "mint", name: "Mint tea", price: 5 },30  ]);31  return (32    <CartContext value={cart}>33      <CartDispatchContext value={dispatch}>34        <CartTotal />35        <AddSencha />36      </CartDispatchContext>37    </CartContext>38  );39}

1import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6];7 8function CartBadge() {9  const cart = useCart();10  return <p>Cart: {cart.length}</p>;11}12 13function ProductCard({ tea }) {14  const dispatch = useCartDispatch();15  return (16    <li>17      {tea.name}: ${tea.price}{" "}18      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>19    </li>20  );21}22 23// Write ClearButton here.24 25export default function App() {26  return (27    <CartProvider>28      <header>29        <h2>Tea Corner</h2>30        <CartBadge />31      </header>32      <ul>33        {teas.map((tea) => (34          <ProductCard key={tea.id} tea={tea} />35        ))}36      </ul>37    </CartProvider>38  );39}

1import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6];7 8function CartBadge() {9  const cart = useCart();10  return <p>Cart: {cart.length}</p>;11}12 13function ProductCard({ tea }) {14  const dispatch = useCartDispatch();15  return (16    <li>17      {tea.name}: ${tea.price}{" "}18      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>19    </li>20  );21}22 23function ClearButton() {24  const dispatch = useCartDispatch();25  return <button onClick={() => dispatch({ type: "cleared" })}>Clear</button>;26}27 28export default function App() {29  return (30    <CartProvider>31      <header>32        <h2>Tea Corner</h2>33        <CartBadge />34        <ClearButton />35      </header>36      <ul>37        {teas.map((tea) => (38          <ProductCard key={tea.id} tea={tea} />39        ))}40      </ul>41    </CartProvider>42  );43}

import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";

const teas = [
  { id: "sencha", name: "Sencha", price: 4 },
  { id: "assam", name: "Assam", price: 3 },
];

function CartBadge() {
  const cart = useCart();
  return <p>Cart: {cart.length}</p>;
}

function ProductCard({ tea }) {
  const dispatch = useCartDispatch();
  return (
    <li>
      {tea.name}: ${tea.price}{" "}
      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>
    </li>
  );
}

export default function App() {
  return (
    <>
      <header>
        <h2>Tea Corner</h2>
        <CartBadge />
      </header>
      <CartProvider>
        <ul>
          {teas.map((tea) => (
            <ProductCard key={tea.id} tea={tea} />
          ))}
        </ul>
      </CartProvider>
    </>
  );
}

1import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6];7 8function CartBadge() {9  const cart = useCart();10  return <p>Cart: {cart.length}</p>;11}12 13function ProductCard({ tea }) {14  const dispatch = useCartDispatch();15  return (16    <li>17      {tea.name}: ${tea.price}{" "}18      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>19    </li>20  );21}22 23export default function App() {24  return (25    <CartProvider>26      <header>27        <h2>Tea Corner</h2>28        <CartBadge />29      </header>30      <ul>31        {teas.map((tea) => (32          <ProductCard key={tea.id} tea={tea} />33        ))}34      </ul>35    </CartProvider>36  );37}

1import { CartProvider } from "./CartContext.jsx";2import Header from "./Header.jsx";3import ProductList from "./ProductList.jsx";4import CartPanel from "./CartPanel.jsx";5 6export default function App() {7  return (8    <CartProvider>9      <Header />10      <ProductList />11      <CartPanel />12    </CartProvider>13  );14}

1import { CartProvider } from "./CartContext.jsx";2import Header from "./Header.jsx";3import ProductList from "./ProductList.jsx";4import CartPanel from "./CartPanel.jsx";5 6export default function App() {7  return (8    <CartProvider>9      <Header />10      <ProductList />11      <CartPanel />12    </CartProvider>13  );14}

1import { useReducer } from "react";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6  { id: "mint", name: "Mint tea", price: 5 },7];8 9function savedReducer(saved, action) {10  switch (action.type) {11    case "toggled":12      return saved.includes(action.id)13        ? saved.filter((id) => id !== action.id)14        : [...saved, action.id];15    default:16      throw Error("Unknown action: " + action.type);17  }18}19 20function SavedCount({ saved }) {21  return <p>Saved: {saved.length}</p>;22}23 24function Header({ saved }) {25  return (26    <header>27      <h2>Tea Corner</h2>28      <SavedCount saved={saved} />29    </header>30  );31}32 33function SaveButton({ tea, saved, dispatch }) {34  const isSaved = saved.includes(tea.id);35  return (36    <button onClick={() => dispatch({ type: "toggled", id: tea.id })}>37      {isSaved ? "Saved" : "Save"} {tea.name}38    </button>39  );40}41 42function ProductList({ saved, dispatch }) {43  return (44    <ul>45      {teas.map((tea) => (46        <li key={tea.id}>47          <SaveButton tea={tea} saved={saved} dispatch={dispatch} />48        </li>49      ))}50    </ul>51  );52}53 54export default function App() {55  const [saved, dispatch] = useReducer(savedReducer, []);56  return (57    <>58      <Header saved={saved} />59      <ProductList saved={saved} dispatch={dispatch} />60    </>61  );62}

1import { SavedProvider, useSaved, useSavedDispatch } from "./SavedContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6  { id: "mint", name: "Mint tea", price: 5 },7];8 9function SavedCount() {10  const saved = useSaved();11  return <p>Saved: {saved.length}</p>;12}13 14function Header() {15  return (16    <header>17      <h2>Tea Corner</h2>18      <SavedCount />19    </header>20  );21}22 23function SaveButton({ tea }) {24  const saved = useSaved();25  const dispatch = useSavedDispatch();26  const isSaved = saved.includes(tea.id);27  return (28    <button onClick={() => dispatch({ type: "toggled", id: tea.id })}>29      {isSaved ? "Saved" : "Save"} {tea.name}30    </button>31  );32}33 34function ProductList() {35  return (36    <ul>37      {teas.map((tea) => (38        <li key={tea.id}>39          <SaveButton tea={tea} />40        </li>41      ))}42    </ul>43  );44}45 46export default function App() {47  return (48    <SavedProvider>49      <Header />50      <ProductList />51    </SavedProvider>52  );53}

1import { CartProvider, useCart, useCartDispatch } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6  { id: "mint", name: "Mint tea", price: 5 },7];8 9function ProductCard({ tea }) {10  const dispatch = useCartDispatch();11  return (12    <li>13      {tea.name}: ${tea.price}{" "}14      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>15    </li>16  );17}18 19function CartTotal() {20  const cart = useCart();21  const total = cart.reduce((sum, tea) => sum + tea.price, 0);22  return <p>Total: ${total}</p>;23}24 25function CheckoutButton() {26  const cart = useCart();27  const total = cart.reduce((sum, tea) => sum + tea.price, 0);28  return <button disabled={total === 0}>Pay ${total}</button>;29}30 31export default function App() {32  return (33    <CartProvider>34      <ul>35        {teas.map((tea) => (36          <ProductCard key={tea.id} tea={tea} />37        ))}38      </ul>39      <CartTotal />40      <CheckoutButton />41    </CartProvider>42  );43}

1import { CartProvider, useCartDispatch, useCartTotal } from "./CartContext.jsx";2 3const teas = [4  { id: "sencha", name: "Sencha", price: 4 },5  { id: "assam", name: "Assam", price: 3 },6  { id: "mint", name: "Mint tea", price: 5 },7];8 9function ProductCard({ tea }) {10  const dispatch = useCartDispatch();11  return (12    <li>13      {tea.name}: ${tea.price}{" "}14      <button onClick={() => dispatch({ type: "added", tea })}>Add {tea.name}</button>15    </li>16  );17}18 19function CartTotal() {20  const total = useCartTotal();21  return <p>Total: ${total}</p>;22}23 24function CheckoutButton() {25  const total = useCartTotal();26  return <button disabled={total === 0}>Pay ${total}</button>;27}28 29export default function App() {30  return (31    <CartProvider>32      <ul>33        {teas.map((tea) => (34          <ProductCard key={tea.id} tea={tea} />35        ))}36      </ul>37      <CartTotal />38      <CheckoutButton />39    </CartProvider>40  );41}

Check your understanding

For each question, find the provider, then ask which components sit inside it and what each one reads.

Key takeaways

• Prop drilling passes state and handlers through layers that don't use them. Context lets any component below a provider read a value directly.
• To combine a reducer with context: create two contexts, provide the state and dispatch from the component that calls useReducer, and read them with useContext anywhere below.
• A provider component like CartProvider holds the reducer and both providers, and renders its children inside them.
• Custom hooks like useCart and useCartDispatch hide which context a component reads, and can throw a clear error when there's no provider.
• dispatch never changes, so a separate context for it lets components that only send actions skip the renders that cart changes cause.
• Since React 19, you write <CartContext value={cart}> instead of <CartContext.Provider>.

Coming next: Thinking in React. It builds a searchable product table from a design, in five steps, and decides what is state and where each piece lives.