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:

1. Context API: Share data without prop drilling
2. State management: Redux, Zustand, etc.
3. 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