React Lesson 12: useContext — Sharing State

Context solves the “prop drilling” problem — passing data through many component layers. With Context, any component can access shared data without passing it through every level.

The Problem: Prop Drilling

// Without Context: theme must pass through every layer
function App() {
  const theme = "dark";
  return <Layout theme={theme} />;
}
function Layout({ theme }) {
  return <Header theme={theme} />;
}
function Header({ theme }) {
  return <Button theme={theme} />; // finally used here!
}

useContext Solution

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

// 1. Create the context
const ThemeContext = createContext("light");

// 2. Provide it at the top level
function App() {
  const [theme, setTheme] = useState("dark");
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Layout />
    </ThemeContext.Provider>
  );
}

// 3. Consume it ANYWHERE in the tree
function Button() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button
      style={{ background: theme === "dark" ? "#1a1a2e" : "#ffffff" }}
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      Toggle Theme
    </button>
  );
}