✅ What is Context API in React?

The Context API in React is a built-in feature that allows you to share data across multiple components without passing props manually at every level, a problem commonly called prop drilling. It is ideal for managing global data such as themes, authentication details, language preferences, or application-wide configuration.

🚀 Why and When to Use Context API

Context is useful when you need app-wide state that many components depend on. Typical scenarios include managing light/dark themes, storing authenticated user information, handling localization (multi-language support), and controlling feature flags or configuration settings. It is important not to use Context for small, local state like form inputs, where useState or useReducer is simpler and more efficient.

⚠️ The Problem: Prop Drilling

Without Context, data must be passed through every level of the component tree, even if intermediate components don’t need it. This makes the code harder to read and maintain as the app grows.

function App() {
  const [theme, setTheme] = React.useState("light");
  return <Layout theme={theme} setTheme={setTheme} />;
}
function Layout({ theme, setTheme }) {
  return <Toolbar theme={theme} setTheme={setTheme} />;
}
function Toolbar({ theme, setTheme }) {
  return <ThemeButton theme={theme} setTheme={setTheme} />;
}
function ThemeButton({ theme, setTheme }) {
  return (
    <button onClick={() => setTheme(t => (t === "light" ? "dark" : "light"))}>
      Theme: {theme}
    </button>
  );
}

✅ The Solution: Context API

Context removes the need to forward props through intermediate components by providing data directly to any component that needs it.

1) Create Context and Provider

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

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  const value = useMemo(
    () => ({
      theme,
      toggleTheme: () =>
        setTheme(t => (t === "light" ? "dark" : "light")),
    }),
    [theme]
  );

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) {
    throw new Error("useTheme must be used within ThemeProvider");
  }
  return ctx;
}

2) Use the Provider at a High Level

import React from "react";
import { ThemeProvider } from "./theme-context";
import AppShell from "./AppShell";

export default function App() {
  return (
    <ThemeProvider>
      <AppShell />
    </ThemeProvider>
  );
}

3) Consume Context Anywhere

import React from "react";
import { useTheme } from "./theme-context";

export default function ThemeButton() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme}>
      Theme: {theme} (click to toggle)
    </button>
  );
}

With this setup, no intermediate components need to receive or forward theme-related props.

💡 Benefits of Using Context

Context eliminates prop drilling, improves code readability and maintainability, allows any component under a Provider to access shared data instantly, and centralizes logic when combined with custom hooks for a better developer experience.

✅ Best Practices

Use useMemo to avoid unnecessary re-renders when providing values, split contexts if performance becomes critical, always wrap context access in a custom hook for safety and clarity, and avoid overusing Context for state that is only needed locally.

🧾 Conclusion

The React Context API is a powerful solution for managing global state without the pain of prop drilling. It works best for cross-cutting concerns like theming, authentication, and localization, but should be applied thoughtfully. When used correctly, Context makes your React applications cleaner, more scalable, and easier to maintain.

React Context API Explained with Example (2025 Guide)