When should you use Context instead of prop drilling?

Prop drilling is passing a prop through intermediate components that do not use it. It is not automatically bad: explicit props make data flow easy to trace. Context helps when the same value is needed across a wide subtree and threading it through every layer would couple unrelated components.

const ThemeContext = createContext("light");

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext value={theme}>
      <Toolbar onToggle={() => setTheme(theme === "light" ? "dark" : "light")} />
    </ThemeContext>
  );
}

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

function ThemeButton({ onClick }) {
  const theme = useContext(ThemeContext);
  return <button onClick={onClick}>Theme: {theme}</button>;
}

Good context candidates

• Theme, locale and direction
• The current authenticated user or permissions
• A router or a query client
• A small, well-defined store shared by a feature

Do not put every piece of state in one global context. A context provider re-renders its consumers when its value changes, and a large object value makes that happen more often. Split independent values into separate providers and keep the provider close to the subtree that needs it.