Problem 2: Prop Drilling
Passing props through multiple levels of components
The Problem: Prop Drilling
Passing props through many intermediate components
When you need to pass data from a parent to a deeply nested child, you have to pass it through every intermediate component, even if they don't use it.
Level 1 (Intermediate - doesn't use props)
Level 2 (Intermediate - doesn't use props)
Level 3 (Actual Consumer)
User: John Doe
Email: john@example.com
Role: Admin
Admin: Yes
Issues:
- Intermediate components become cluttered with unused props
- Hard to refactor or rename props
- Difficult to understand data flow
- Performance issues with unnecessary re-renders
- Makes components less reusable