Lesson 17 — useContext Hook Explained

Introduction 😊

So far, you’ve learned how to:

• Create components
• Pass data using props
• Manage state with useState
• Handle side effects using useEffect

But what happens when many components need the same data?

Passing props again and again becomes messy 😕
This problem is called Prop Drilling.

To solve this, React provides the useContext hook ⚛️

In this lesson, you will learn:

• What prop drilling is
• What context is in React
• How useContext works
• Step-by-step example
• When to use (and not use) useContext

Let’s begin 🚀

What Is Prop Drilling? 🤔

Prop drilling happens when data is passed from:
Parent → Child → Grandchild → Deep child

Even if intermediate components don’t need the data, they still have to pass it.

Example problem:

<App>
  <Header>
    <Navbar>
      <UserProfile />
    </Navbar>
  </Header>
</App>

👉 If UserProfile needs user data, props must travel through all components.

This makes code:

• Hard to read ❌
• Hard to maintain ❌

What Is Context in React? 🧠

Context allows you to:

• Store data globally
• Share data without passing props manually

👉 In simple words:

Context is a global data store for your React app.

Common use cases:

• User authentication 👤
• Theme (dark / light) 🌙☀️
• Language settings 🌍

What Is useContext Hook? ⚛️

useContext is a React Hook that lets you consume context data easily.

👉 It allows any component to access shared data directly, without prop drilling.

Step-by-Step Example of useContext 🪜

Let’s understand useContext with a simple example.

Step 1️⃣ Create a Context

import { createContext } from "react";

export const UserContext = createContext();

Step 2️⃣ Provide Context Value

Wrap your app with a Provider.

import { UserContext } from "./UserContext";

function App() {
  const user = "Avni";

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

Step 3️⃣ Consume Context Using useContext

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

function Dashboard() {
  const user = useContext(UserContext);

  return <h2>Welcome, {user}</h2>;
}

👉 No props needed 🚫
👉 Clean and readable code ✅

useContext with Object Data 🧩

You can pass objects too.

<UserContext.Provider value={{ name: "Avni", role: "Admin" }}>

Consume:

const { name, role } = useContext(UserContext);

When Should You Use useContext? 🤔

Use useContext when:

• Data is needed by many components
• You want to avoid prop drilling
• Data is global (auth, theme, language)

When NOT to Use useContext 🚫

Avoid useContext when:

• Data is needed by only one child
• Simple props are enough
• Performance is critical (frequent updates)

👉 Overusing context can hurt performance.

useContext vs Props ⚖️

Common Mistakes Beginners Make ❌

• Forgetting to wrap Provider
• Creating too many contexts
• Using context for everything
• Not separating context logic

💡 Use context wisely.

Conclusion 🎯

The useContext hook is a powerful tool to manage shared data in React.

Key takeaways:

• useContext solves prop drilling
• Context provides global data
• Cleaner and more maintainable code
• Best for auth, theme, and settings

👉 Master useContext to write scalable React apps 💙

Frequently Asked Questions (FAQs) ❓

Does useContext replace Redux?

No. useContext is for simple global state.

Can we use multiple contexts?

Yes. But keep them organized.

Is useContext beginner-friendly?

Yes, when used correctly.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 18 — Custom Hooks in React
Creating reusable logic using custom hooks.