Lesson 24 — Props Drilling Problem & Context API (Real Example)

🧭 Introduction

As React applications grow in size, sharing data between components becomes challenging. Passing data from a parent component to deeply nested child components using props can make code messy, repetitive, and difficult to maintain.

This problem is known as Props Drilling.

In this lesson, you will clearly understand:

• What Props Drilling is ❌
• Why it becomes a problem in real projects
• A real-world example
• How Context API solves this issue cleanly ✅

❓ What is Props Drilling?

Props Drilling means:

Passing data from a parent component to a deeply nested child component through multiple intermediate components, even when those components do not need the data.

🧠 Real-Life Analogy

Imagine 👇
You want to give a message to your friend living on the 5th floor 🏢
But the message must pass through:

• Ground floor
• 1st floor
• 2nd floor
• 3rd floor
• 4th floor

Even though only the 5th floor needs it 😵‍💫
This unnecessary passing is exactly what Props Drilling looks like in React.

🚫 Props Drilling Example (Problem)

🧩 Component Structure

App
 └── Parent
      └── Child
           └── GrandChild

📄 App.jsx

import Parent from "./Parent";

function App() {
  return <Parent />;
}

export default App;

📄 Parent.jsx

import Child from "./Child";

const Parent = () => {
  const userName = "Avni";

  return <Child userName={userName} />;
};

export default Parent;

📄 Child.jsx

import GrandChild from "./GrandChild";

const Child = ({ userName }) => {
  return <GrandChild userName={userName} />;
};

export default Child;

📄 GrandChild.jsx

const GrandChild = ({ userName }) => {
  return <h2>Hello, {userName} 👋</h2>;
};

export default GrandChild;

😖 Why is Props Drilling a Problem?

❌ Components receive props they don’t use
❌ Code becomes harder to read
❌ Refactoring is risky
❌ Scaling the app becomes difficult

This is the Props Drilling Problem.

✅ Solution: Context API

The Context API allows you to:

• Create global data
• Access it from any component
• Avoid passing props manually at every level

🧠 When Should You Use Context API?

✔ Authentication (logged-in user)
✔ Theme (dark / light mode)
✔ Language or locale
✔ App-wide settings
✔ User preferences

🛠 Solving Props Drilling Using Context API (Step-by-Step)

✅ Step 1: Create Context

📄 UserContext.js

import { createContext } from "react";

const UserContext = createContext();

export default UserContext;

✅ Step 2: Provide Context Value

📄 App.jsx

import Parent from "./Parent";
import UserContext from "./UserContext";

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

  return (
    <UserContext.Provider value={userName}>
      <Parent />
    </UserContext.Provider>
  );
}

export default App;

✅ Step 3: Consume Context (No Props Needed)

📄 GrandChild.jsx

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

const GrandChild = () => {
  const userName = useContext(UserContext);

  return <h2>Hello, {userName} 👋</h2>;
};

export default GrandChild;

🚀 Result After Using Context API

✔ No props drilling
✔ Cleaner component structure
✔ Better scalability
✔ Easier maintenance

🔁 Updated Component Tree

App (Provider)
 └── Parent
      └── Child
           └── GrandChild (Consumer)

📌 Props vs Context API

⚠ Common Mistakes

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

🎯 Best Practices

✅ Use props for simple parent-child data
✅ Use Context for global state
✅ Keep context files separate
✅ Avoid overusing Context

❓ FAQs — Props Drilling & Context API

🔹 What is props drilling in simple words?

Props drilling means passing data through many components that don’t actually need that data, just to reach a deeply nested component.

🔹 Is props drilling bad?

Props drilling is not bad for small apps, but it becomes a problem in large and scalable applications.

🔹 Is Context API a replacement for props?

❌ No.
Props are still best for direct parent-to-child communication. Context is for global data.

🔹 Can Context API replace Redux?

Context API can replace Redux for small to medium apps, but Redux is better for complex state management.

🔹 Does Context API affect performance?

Yes, if overused. Frequent value changes can cause unnecessary re-renders.

🧠 Quick Recap

✔ Props Drilling makes code complex
✔ Context API avoids unnecessary prop passing
✔ createContext, Provider, useContext are key tools
✔ Best for global data sharing

🎉 Conclusion

Props Drilling is a common real-world problem in React applications. The Context API provides a clean and powerful solution to share data across components without breaking your component hierarchy.

Mastering this concept will help you build clean, scalable, and professional React applications 🚀

👉 Next Lesson:
Lesson 25 — useContext Hook Explained (Authentication Example)