Q15- What is prop drilling? How do you avoid it?

Prop drilling happens when you pass props down through multiple layers of components just to reach a deeply nested child, even if the intermediate components don’t need those props themselves.

---

🧾 Example of Prop Drilling:

function App() {
  const user = "Teekam";
  return <Parent user={user} />;
}

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

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

function GrandChild({ user }) {
  return <h1>Hello, {user}</h1>;
}

👉 Here, user is passed through Parent and Child unnecessarily — only GrandChild actually uses it.

---

🚫 How to Avoid Prop Drilling:

1. React Context API — Share data globally without passing it through every level.

import { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Teekam">
      <Parent />
    </UserContext.Provider>
  );
}

function GrandChild() {
  const user = useContext(UserContext);
  return <h1>Hello, {user}</h1>;
}

✅ No more passing props through Parent or Child.

---

1. State Management Libraries — For larger apps, tools like or help manage state globally.
2. Component Composition — Pass only what’s needed where it’s needed, avoiding unnecessary layers.

---

✅ In short:

• Prop drilling = passing props through many layers unnecessarily.
• Avoid it using Context API, state management libraries, or better component structure.