Kill Prop Drilling: Share State with Context API

The Context API provides a way to share data across the component tree without passing props down manually at every level (a problem known as prop drilling).

👉 Think of it like a global intercom system for your app — once you speak into it, any component can listen.

Basics & Need

In large React apps, you often have global state like:

• Authentication (user, token)
• Theme (dark or light)
• Language / localization settings
• Shopping cart items

Passing these as props through many nested components quickly becomes messy. Context API fixes this by letting components subscribe directly to shared state.

How to Achieve It

Step 1: Create Context

const ThemeContext = React.createContext();

Step 2: Provide Context

const ThemeProvider = ({ children }) => {
const [theme, setTheme] = React.useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};

Step 3: Consume Context

const ThemedButton = () => {
const { theme, setTheme } = React.useContext(ThemeContext);
return (
<button
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}
>
Current theme: {theme}
</button>
);
};

// Usage
<ThemeProvider>
<ThemedButton />
</ThemeProvider>;

Best Practices

• Wrap context in a provider component (e.g., ThemeProvider) for cleaner usage.
• Keep context specific (auth context, theme context, etc.) — don’t stuff everything in one global context.
• Pair with custom hooks (useTheme, useAuth) for cleaner access.
• Avoid deeply nested providers (provider hell).

Real-World Examples

1. Theme Switcher → Light/Dark mode across entire app.
2. Auth Provider → Manage login, logout, and user roles globally.
3. Cart Provider → Track shopping cart across product pages.

Advantages

• Eliminates prop drilling.
• Centralizes app-wide state (auth, theme, language).
• Works seamlessly with custom hooks.

Disadvantages

• Re-render performance issues: every consumer re-renders on context change.
• Harder to debug when many contexts are nested.
• May lead to overuse — not all state should be global.

Common Problems / Pitfalls

• Forgetting to wrap children in provider → useContext returns undefined.
• Putting too much state into one context → unnecessary re-renders.
• Using context for local state where props/state would be simpler.

Summary Recommendation

Use Context API to manage shared global state (auth, theme, cart, language) without prop drilling. Combine with custom hooks for the cleanest developer experience. Avoid overusing it — keep local state local, and only use context when the data truly belongs to the whole app.