React Context API: Share State Without Prop Drilling

The Prop Drilling Problem

Prop drilling happens when you pass props through many intermediate components just to reach a deeply nested child. Context solves this by letting any component in the tree subscribe to shared state directly.

Creating and Providing Context

Call createContext with a default value to create the context object. Wrap the parts of your component tree that need access in the Context.Provider and pass the shared value via the value prop.

Consuming Context with useContext

Call useContext(MyContext) inside any child component to read the current context value. The component will re-render whenever the context value changes, just like props.

Context vs Redux: When to Use Each

Use Context for low-frequency updates like theme, locale, or authentication state. Use Redux or Zustand when you need frequent updates, complex logic, time-travel debugging, or cross-cutting concerns between many disconnected components.