React's Context API & useReducer — Advanced State ManagementEntry 1 of 7
Prop Drilling: The Problem Context Solves
Prop drilling is passing data through several layers of components that don't use it, just so a deeply nested component can receive it.
Notes
Most React apps consist of many nested components. In a shop app, Product (under Shop) updates the cart, and Cart (under Header → CartModal) displays it. With lifted state alone, App owns the cart and must pass it, plus the update functions, through every component in between.
Context removes the middle layers: the state is provided once, high in the tree, and any nested component reads it directly.
What / Why / When
- What
Passing props through components that only forward them.
- Why it's a problem
Intermediate components become coupled to data they don't use, and every refactor touches the whole chain.
- When to switch to Context
Several components at different depths need the same data (cart, auth user, theme, locale).
- When not to
Data used by one or two nearby components. Plain props are simpler and more explicit.
Code compare
// ❌ Prop drilling: Header and CartModal only forward the cart<Header cart={shoppingCart} onUpdateCartItemQuantity={handleUpdateCartItemQuantity} />// ✅ With context: nothing is passed; Cart reads the cart directly (Entries 2–4)<Header />Angular rarely has this problem: any component can inject() a service, regardless of depth. A service is Angular's answer to both prop drilling and Context.
No Angular code for this example.
Quick reference
| React | Angular |
|---|---|
| Props through every layer | input() through every layer |
| Context | Injectable service |