React Context

ELI5 — The Vibe Check

React Context is like a family group chat for your components. Instead of passing props through 17 generations of children (prop drilling), you create a Context and any descendant can just read it directly. Theme, auth, locale - the classics live here.

Real Talk

React Context provides a mechanism to share values between components without explicitly passing props through every level of the tree. It consists of a Provider that supplies the value and consumers (useContext hook) that read it, triggering re-renders when the value changes.

Show Me The Code

const ThemeContext = createContext('light');
// Provider
<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
// Consumer
const theme = useContext(ThemeContext);

When You'll Hear This

"Context is great for themes but terrible for frequently updating state" / "If you're putting everything in Context, you might want Zustand instead"