Context and Shared State

When many components need the same value, props become noisy. Context provides it to a whole subtree.

Create a Context

A context holds a value that any descendant can read. Provide it once near the top of the tree.

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

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const value = useContext(ThemeContext);
  if (!value) throw new Error("useTheme must be used inside ThemeProvider");
  return value;
}

Using It

Any descendant can read and update the theme without receiving props.

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button => setTheme(theme === "light" ? "dark" : "light")}>
      Switch to {theme === "light" ? "dark" : "light"}
    </button>
  );
}

When Not to Use Context

Context is not a replacement for every state. Keep local state local. Use context for values that are genuinely global, such as the current user, theme or language.

Practice

1. Create a user context with a name and a logout function.
2. Read the context in a nested component.
3. Explain why local state is better for a single form.

Hands-on exercise

Create a CartContext that holds an array of items and an addItem function.
Provide it at the app root.
Build a button component that adds a product and a header that shows the item count.

Recap

Context shares state across a subtree. Use it for genuinely global values and keep local state local.