Lesson 25 — Context API in React (Real Example)

🧭 Introduction

In modern React applications, managing and sharing state across multiple components is a common challenge. When the same data is required in many places, passing it again and again using props makes the code complex and difficult to maintain.

To solve this problem, React provides a powerful built-in feature called the Context API.

In this lesson, you will learn:

• What Context API is
• Why it is used in state management
• How it works internally
• A real-world example using Context API
• Best practices and common mistakes

❓ What is Context API in React?

Context API allows you to:

Share data globally across components without passing props manually at every level.

It helps manage global state such as:

• Logged-in user information
• Theme (dark / light mode)
• Language preferences
• App-wide settings

🧠 Why Context API is Needed?

Before Context API ❌

• Data flows only from parent to child
• Deep component trees cause props drilling
• Code becomes hard to scale

With Context API ✅

• Data is stored in one place
• Any component can access it directly
• Cleaner and more maintainable code

🧩 Real-World Example Scenario

🎯 Problem Statement

We want to display the logged-in user name on multiple pages:

• Dashboard
• Profile
• Header

Instead of passing user as props everywhere, we’ll use Context API.

🏗 Project Structure

src/
 ├── context/
 │    └── AuthContext.js
 ├── components/
 │    ├── Header.jsx
 │    └── Dashboard.jsx
 └── App.jsx

🛠 Step-by-Step Implementation

✅ Step 1: Create Context

📄 context/AuthContext.js

import { createContext } from "react";

const AuthContext = createContext();

export default AuthContext;

✅ Step 2: Provide Context Value

📄 App.jsx

import AuthContext from "./context/AuthContext";
import Header from "./components/Header";
import Dashboard from "./components/Dashboard";

function App() {
  const user = {
    name: "Avni",
    role: "Admin"
  };

  return (
    <AuthContext.Provider value={user}>
      <Header />
      <Dashboard />
    </AuthContext.Provider>
  );
}

export default App;

🔹 Provider makes the data available to all child components.

✅ Step 3: Consume Context in Any Component

📄 components/Header.jsx

import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const Header = () => {
  const user = useContext(AuthContext);

  return <h3>Welcome, {user.name} 👋</h3>;
};

export default Header;

📄 components/Dashboard.jsx

import { useContext } from "react";
import AuthContext from "../context/AuthContext";

const Dashboard = () => {
  const user = useContext(AuthContext);

  return (
    <p>
      Role: <strong>{user.role}</strong>
    </p>
  );
};

export default Dashboard;

🚀 Result

✔ No props passed
✔ Any component can access global data
✔ Clean and scalable state management
✔ Perfect for authentication & settings

🔄 How Context API Works (Behind the Scenes)

1️⃣ Context is created using createContext()
2️⃣ Provider supplies the value
3️⃣ Components consume data using useContext()
4️⃣ When value changes → consumers re-render

📌 Context API vs Props

⚠ Common Mistakes

❌ Forgetting to wrap components with Provider
❌ Creating too many contexts
❌ Using Context for frequently changing state
❌ Mixing props & context unnecessarily

🎯 Best Practices

✅ Use Context for global state only
✅ Keep context files inside a context folder
✅ Combine with useReducer for complex logic
✅ Avoid overusing Context

❓ FAQs — Context API in React

🔹 Is Context API a state management tool?

Yes. Context API is a built-in state management solution for small to medium React applications.

🔹 Can Context API replace Redux?

For simple to medium apps — yes.
For large apps with complex logic — Redux is better.

🔹 Does Context API cause performance issues?

It can, if the value changes frequently. Always structure context carefully.

🔹 Can multiple contexts be used?

Yes. You can create separate contexts for auth, theme, language, etc.

🔹 Is Context API beginner-friendly?

Yes, once you understand Provider and useContext.

🧠 Quick Recap

✔ Context API enables global state
✔ Prevents props drilling
✔ Uses createContext, Provider, useContext
✔ Ideal for auth, theme & settings

🎉 Conclusion

The Context API is a powerful and essential tool for managing global state in React. It simplifies data sharing, reduces unnecessary props, and helps you build clean, scalable, and professional applications.

Mastering Context API is a must-have skill for every React developer 🚀

👉 Next Lesson (SECTION 5):
Lesson 26 — useContext Hook Explained (Authentication Example)