🔹 What is Prop Drilling?

Prop drilling is the process of passing data (props) from a parent component down to deeply nested child components through intermediate components.

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

---

🔹 Basic Flow

Parent → Child → Grandchild → GreatGrandchild

Data travels step-by-step through each level.

---

🔹 Simple Example (Passing Data)

✅ Parent Component

function Parent() {
  const message = "Hello from Parent!";

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

---

✅ Child Component

function Child(props) {
  return <GrandChild message={props.message} />;
}

---

✅ GrandChild Component

function GrandChild(props) {
  return <h1>{props.message}</h1>;
}

---

✅ Result:
The message flows like this:

Parent → Child → GrandChild

Even though Child doesn’t use message, it must forward it.

---

🔹 Passing Functions as Props

You can also pass functions down the same way.

---

✅ Parent Component

function Parent() {
  const showAlert = () => {
    alert("Button clicked!");
  };

  return <Child onClick={showAlert} />;
}

---

✅ Child Component

function Child(props) {
  return <GrandChild onClick={props.onClick} />;
}

---

✅ GrandChild Component

function GrandChild(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

---

✅ What happens:

• GrandChild button click → calls function from Parent

• Data flow is still top → down, but events can bubble back via functions

---

🔹 Why is it called "Drilling"?

Because you're “drilling” props through layers of components:

Parent
  ↓
Child (doesn't need data)
  ↓
GrandChild (actually uses data)

---

🔹 Problem with Prop Drilling

It becomes messy when:

• Many nested components

• Too many props being passed

• Intermediate components don’t need the data

❌ Example Issue

<Level1 data={data}>
  <Level2 data={data}>
    <Level3 data={data}>
      <Level4 data={data}>

Hard to maintain and debug 😵

---

🔹 Solutions to Avoid Prop Drilling

When prop drilling becomes too much, use:

✅ 1. Context API

Lets you share data globally

const MyContext = createContext();

---

✅ 2. State Management Libraries

• Redux

• Zustand

• Recoil

---

✅ 3. Component Composition

Sometimes restructure components instead

---

🔹 Quick Visual Summary

✅ Data flow:

Parent → Child → GrandChild

✅ You can pass:

• variables ✅

• functions ✅

• objects ✅

✅ Issue:

• unnecessary passing through components

---

🔹 Interview Tip

✅ Define it simply:

Prop drilling is the process of passing props from a parent component to deeply nested child components through intermediate components, even if those components do not use those props.

---

✅ Final Takeaway

• Prop drilling = passing props down multiple levels

• Works fine for small apps ✅

• Becomes messy in large apps ❌

• Use Context or state libraries when needed ✅