# 📘 React Mastery Series — Day 9

## Prop Drilling in React — What It Is, Why It’s a Problem & How to Think About It

As your React app grows, you’ll notice something annoying:

👉 Passing props again and again and again…

This problem is called **Prop Drilling**.

Let’s understand it clearly.

---

## 🤔 What is Prop Drilling?

Prop drilling happens when:

👉 Data is passed from parent → child → grandchild  
👉 Even when intermediate components don’t need it

---

## ❌ Example — The Problem

```plaintext
function App() {
  const [user, setUser] = useState("Shailaja");

  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <h3>Hello, {user}</h3>;
}
```

⚠ `Parent` doesn’t use `user`  
Yet it must pass it down.

---

## 🚫 Why Prop Drilling Is a Problem

• Code becomes messy  
• Hard to maintain  
• Difficult to debug  
• Poor scalability

---

## 😌 When Prop Drilling Is OK

✔ Small apps  
✔ Shallow component tree  
✔ One-time data flow

Don’t over-optimize early.

---

## ✅ Common Solutions (High level)

### 1️⃣ Lift state wisely

### 2️⃣ Component composition

### 3️⃣ **Context API** (most common)

### 4️⃣ State management libraries (Redux, Zustand)

We’ll deep-dive soon 👇

---

## 🧠 Better Thinking Pattern

Ask yourself:

> “Does this component really need this prop?”

If not, prop drilling may be happening.

---

## 🎯 Real-World Example

• Auth user data  
• Theme (dark/light)  
• Language preference  
• App settings

All are bad candidates for prop drilling.

---

## ✅ Key Takeaways

✔ Prop drilling = passing props unnecessarily  
✔ Makes code harder to scale  
✔ OK for small apps  
✔ Context solves it

---

## 🔜 Coming Next

**Day 10 — Introduction to Context API (No Fear, No Confusion)** 😄

---

💬 Have you faced prop drilling in your projects yet?

**Thank you for reading! 🙌**