prop drilling — the React equivalent of passing notes in class... except the note has to go through every single student in the row before it reaches the intended friend at the end.
Formally speaking, prop drilling refers to the process where you pass props through multiple intermediate components purely so that a deeply nested child component can access them. The intermediates neither use nor care about the props — they’re just glorified delivery trucks.
📦 Example (Prop Drilling in Action):
function App() {
const user = "T.S.";
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 from App → Parent → Child → GrandChild, even though only GrandChild actually cares. The rest are just innocent bystanders.
🎭 The Problem?
- Becomes hard to maintain as the component tree grows.
- Components receive props they don’t need.
- Refactoring turns into a game of "Where did this prop come from, and why do I cry at night?"
🛠️ The Solutions?
- React Context API – When you're tired of playing pass-the-prop and want to broadcast data to the tree like a proud parent with a megaphone.
- State management libraries – e.g., Redux, Zustand, Recoil – when you want to go full boss mode on global state.
In summary: Prop drilling is like handing a family secret to your great-grandchild by whispering it through three generations. Works in theory, messy in practice. Use context when the family gets big.
