Interview · Architecture
Prop drilling
When props travel where they shouldn't
Prop drilling occurs when data passes through several intermediate components just to reach a deep one that actually needs it. The intermediaries don't use the data — they just forward it.
The problem
Each intermediate component receives a prop it doesn't use, becoming coupled to a decision that isn't its concern. If the data changes shape, you have to update every link in the chain.
The solutions
Context API — for global state that many components need (theme, user, locale). Composition — pass components as children instead of data, avoiding the tunnel entirely. External state (Zustand, Redux) — when the state logic is complex.
Common pitfalls
- 01Not all prop passing is drilling — passing 2 levels is normal. The problem appears when 4+ components forward a prop without using it.
- 02Context solves drilling but introduces its own coupling: all consumers re-render when the value changes.
- 03Sometimes the real solution is component composition (slot pattern) rather than Context or drilling.
Was this helpful?
Sign in to give feedback