Prop Drilling
Prop drilling = passing props through multiple levels
What is Prop Drilling?
"Passing props through intermediate components"
Prop drilling occurs when you pass props through multiple component levels that don't need them, just to reach a deeply nested component.
"Prop drilling is the practice of passing props through multiple component levels, even when intermediate components don't use those props."
Example of Prop Drilling
Props passed through unused components
// App needs to pass user to Profile
function App() {
const user = { name: "John" };
return <Layout user={user} />;
}
// Layout doesn't use user, just passes it
function Layout({ user }) {
return <Header user={user} />;
}
// Header doesn't use user, just passes it
function Header({ user }) {
return <Profile user={user} />;
}
// Profile actually uses user
function Profile({ user }) {
return <div>{user.name}</div>;
}
"Prop drilling happens when intermediate components receive props they don't use, just to pass them down to nested components."
Problems with Prop Drilling
Maintenance · Clutter · Coupling
- Hard to maintain: Changes require updating multiple components
- Code clutter: Components receive unused props
- Tight coupling: Components depend on prop structure
- Refactoring difficulty: Hard to restructure components
"Prop drilling makes code harder to maintain, clutters components with unused props, and creates tight coupling between components."
Solutions
Context · State management · Composition
Solutions:
- Context API: Share data without prop drilling
- State management: Redux, Zustand, etc.
- Component composition: Restructure components
"Solve prop drilling with Context API, state management libraries, or component composition patterns."
Context API Solution
Provider + useContext
const UserContext = createContext();
function App() {
const user = { name: "John" };
return (
<UserContext.Provider value={user}>
<Layout />
</UserContext.Provider>
);
}
function Profile() {
const user = useContext(UserContext);
return <div>{user.name}</div>;
}
"Context API allows components to access data without prop drilling by using Provider and useContext."
When to Use Context
Shared data across many components
Use Context when:
- Data needed by many components
- Deeply nested components
- Theme, user, language settings
"Use Context for data shared across many components, especially when deeply nested."
When NOT to Use Context
Avoid for frequently changing data
Don't use Context for:
- Frequently changing data (causes re-renders)
- Data only needed by few components
- Simple parent-child communication
"Avoid Context for frequently changing data or simple parent-child communication - use props instead."
Component Composition
Restructure to reduce levels
// Instead of drilling
<App>
<Layout>
<Header>
<Profile user={user} />
</Header>
</Layout>
</App>
// Compose differently
<App>
<Layout header={<Profile user={user} />} />
</App>
"Component composition can reduce prop drilling by restructuring how components are composed."
9️⃣ State Management Libraries
Redux · Zustand · Jotai
For complex apps:
- Redux: Predictable state container
- Zustand: Lightweight state management
- Jotai: Atomic state management
"State management libraries like Redux or Zustand can eliminate prop drilling for complex applications."
Best Practices
✅ Use Context for shared data ✅ Keep Context values stable ✅ Split Contexts by concern ✅ Use composition when possible ❌ Don't overuse Context ❌ Don't put everything in one Context
"Prop drilling is passing props through multiple component levels that don't need them. It causes maintenance issues and code clutter. Solutions include Context API for shared data, state management libraries for complex apps, and component composition to reduce nesting. Use Context for widely shared data, but avoid it for frequently changing data."
🧠 Ultra-Short Cheat Sheet
Passing props through unused components
Problems: maintenance, clutter, coupling
Solutions: Context, state management, composition
Context for shared data
Avoid Context for frequent changes