State management is the backbone of every React application.
But as your app grows, prop drilling becomes a problem:

• Passing data from parent → child → grandchild

• Rewriting the same props

• Managing deeply nested components

React solves this with a built-in tool:

👉 The Context API
A simple, scalable way to share state globally without prop drilling.

Let’s break it down.

---

🧠 What is React Context?

React Context allows you to share data globally across components without passing props manually.

Perfect for:
✔ User authentication
✔ Theme (dark/light)
✔ Language preference
✔ Global UI state (sidebar open, loader, modals)
✔ Cart state in e-commerce apps

---

🏛 How React Context Works

React Context consists of 3 main parts:

1️⃣ Create Context

Creates a global storage container.

2️⃣ Provider

Wraps components and provides shared data.

3️⃣ Consumer / useContext hook

Reads the shared data inside any component.

---

📦 Step 1: Create Context

import { createContext } from "react";

export const ThemeContext = createContext();

---

📡 Step 2: Wrap Components with Provider

import { ThemeContext } from "./ThemeContext";
import { useState } from "react";

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Home />
    </ThemeContext.Provider>
  );
}

export default App;

💡 What’s happening?

• ThemeContext.Provider shares the value { theme, setTheme }

• Any nested component can access or modify the theme

---

🎯 Step 3: Use Context Inside Components (useContext)

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Home() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <h2>Current Theme: {theme}</h2>
      <button onClick={() => setTheme("dark")}>Switch to Dark</button>
    </div>
  );
}

export default Home;

No props needed 👍
No drilling 👍
No complexity 👍

---

🛒 Real Example: Global Cart Using Context

Create Cart Context

// CartContext.js
import { createContext } from "react";
export const CartContext = createContext();

Provider for Cart

// CartProvider.js
import { CartContext } from "./CartContext";
import { useState } from "react";

function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  const addToCart = (item) => setCart([...cart, item]);

  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
}

export default CartProvider;

Wrapping App

<CartProvider>
   <App />
</CartProvider>

Using Cart Anywhere

const { cart, addToCart } = useContext(CartContext);

---

🔍 When Should You Use Context?

Use Context when data must be shared across many levels.

✔ Great for:

• Theme / Dark mode

• User authentication

• Cart state

• Language settings

• Global modal / sidebar

• Current user profile

❌ Not ideal for:

• High-frequency updates (like animations)

• Large datasets (like lists with hundreds of items)

In such cases, use:

• Redux Toolkit

• Zustand

• Jotai

---

⚠️ Common Mistakes to Avoid

❌ Using Context everywhere

Use it only for global state.

❌ Putting large objects in context

Keep it minimal.

❌ Updating context too often

Too many updates = re-renders.

❌ Wrapping entire app with multiple contexts

Use a Context Provider wrapper instead.

---

🧩 Advanced: Multiple Contexts Combined

<AuthContext.Provider value={{ user }}>
  <ThemeContext.Provider value={{ theme }}>
    <App />
  </ThemeContext.Provider>
</AuthContext.Provider>

OR clean version using a layout provider:

function Providers({ children }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        {children}
      </ThemeProvider>
    </AuthProvider>
  );
}

---

🔥 Performance Tip: Use Context with Memo

const value = useMemo(() => ({ theme, setTheme }), [theme]);

Prevents unnecessary re-renders.

---

🏆 Benefits of React Context

---

🎉 Final Thoughts

The React Context API is one of the simplest and cleanest ways to manage global state in React — no extra libraries needed.

Use it wisely, keep it lightweight, and your app will stay clean & scalable.