Prop drilling is passing data through intermediate components that do not use it—only forward props to a deep child. It is normal for shallow trees; it becomes painful when five layers only relay user or theme.
Symptoms
- Layout shells grow huge prop lists unrelated to their UI
- Refactors require touching many files to rename a prop
- Intermediate components re-render when drilled props change
Remedies (preview)
- Component composition — pass
childrenor render props so layout does not know about data - Context — share cross-cutting values (theme, auth) without every layer listing props
- Custom hooks + colocation — fetch or select data where it is consumed when possible
Drilling is not automatically wrong—explicit data flow is easy to trace. Reach for context when traceability cost exceeds clarity benefit.
Important interview questions and answers
- Q: What is prop drilling?
A: Passing props through components that do not need them to reach a descendant. - Q: First alternative to try?
A: Composition (children/slots) or colocating state; then context for truly global cross-cutting data.
Self-check
- Why is explicit drilling sometimes preferable to context?
- How does composition reduce drilling for a toolbar action?
Challenge
Spot the relay layer
- Run the demo and change the theme in the deepest panel.
- Identify which middle component only forwards
theme. - Describe one refactor that removes that relay.
Done when: you can name the pass-through layer and suggest composition or context.
Tip: Try composition (children) before context—often the layout shell does not need the drilled prop at all.
Interview prep
- When is prop drilling acceptable?
Shallow trees with a few layers. Fix with composition or context when intermediate components only pass props through.