What is prop drilling in React?

Prop drilling refers to the process of passing data (props) from a parent component down through multiple levels of nested child components — even if intermediate components don’t need that data, just to reach the one that does.

1. Why It Happens

   • In React, data typically flows from top (parent) to bottom (child) via props.
   • If a deeply nested component needs some data, it must be passed down through every layer between the source and destination — even if the middle components don’t use it.

2. Drawbacks of Prop Drilling

   • ❌ Leads to cluttered code in intermediate components.
   • ❌ Makes components tightly coupled and harder to refactor.
   • ❌ Reduces readability and maintainability in large component trees.

3. Solutions to Avoid Prop Drilling

   • ✅ React Context API – provides a global-like state to share data without drilling.
   • ✅ State Management Libraries – Redux, Zustand, Jotai, etc., for complex apps.
   • ✅ Component Composition – Restructure components to reduce nesting.

🧪 Code Example — Prop Drilling (⚠️ Not Ideal)

Even though only Profile needs use`, every component has to pass it down.

✅ Better Approach — Using React Context API