prop drilling
Cut the prop drilling
Prop drilling is passing data through layers of components that don't use it — they only forward it downward. As the tree grows, it couples every intermediate layer's API to the details of its descendants, making the code brittle. Context and composition with children are the main tools to cut it.
When it's a problem
Passing a prop through 2 levels is normal. The problem appears when intermediate components receive props only to pass them along without ever using them. Any change to the final consumer forces you to touch every intermediary.
Two solutions
Context — ideal for global or semi-global data: current user, theme, locale. The consumer reads directly from context without anyone passing it. Composition — passing children or elements as props avoids tunneling without needing context, and is often the simplest solution.
Common pitfalls
- 01Context is not free: any change to the value re-renders all consumers. Don't use it for state that changes frequently.
- 02Composition with children is often the simplest solution and gets overlooked — before creating a context, check if you can pass elements as props instead.
- 03Don't lift data into Context 'just in case' it's needed elsewhere. Move it only when real drilling is a problem.