#162 What is prop drilling in React?

• Prop drilling happens when you need to pass data (props) from a parent component down to deeply nested child components, even if some intermediate components don’t need that data.
• It makes code harder to maintain and less readable in large applications.

---

🔹 Example of Prop Drilling

import React, { useState } from "react";

// Deeply nested child
function ChildC({ user }) {
  return <h2>User: {user}</h2>;
}

// Passed through ChildB
function ChildB({ user }) {
  return <ChildC user={user} />;
}

// Passed through ChildA
function ChildA({ user }) {
  return <ChildB user={user} />;
}

// Parent component
export default function App() {
  const [user] = useState("Dev");

  return (
    <div>
      <ChildA user={user} />
    </div>
  );
}

👉 Here, user is passed from App → ChildA → ChildB → ChildC, even though only ChildC actually needs it.
👉 This is prop drilling.

---

🔹 Problem with Prop Drilling

❌ Intermediate components (ChildA, ChildB) receive props they don’t use.
❌ In large apps, this becomes messy and hard to refactor.
❌ Leads to tightly coupled components.

---

🔹 Solution: Using Context API

Instead of drilling props, you can provide them globally using Context.

import React, { createContext, useContext, useState } from "react";

// Create Context
const UserContext = createContext();

function ChildC() {
  const user = useContext(UserContext);
  return <h2>User: {user}</h2>;
}

function ChildB() {
  return <ChildC />;
}

function ChildA() {
  return <ChildB />;
}

export default function App() {
  const [user] = useState("Dev");

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

👉 Now, only the component that needs the data (ChildC) consumes it directly.
👉 No prop drilling needed.

---

🔹 Summary (Interview Ready)

✅ Prop drilling = passing props through many layers unnecessarily.
✅ Problem = messy, harder to maintain in large apps.
✅ Solution = use Context API or state management libraries (Redux, Zustand, etc.).