The drilling problem
Prop drilling is passing a value down through many intermediate components that do not use it, just to reach a deep child. It clutters every layer with props it only forwards.
What context solves
Context provides a value at a high level and lets any descendant read it directly, skipping the middle layers.
- A provider holds the value.
- Any consumer below reads it without props.
- Good for truly global things like theme, current user, or locale.
The re render cost
When a context value changes, every component consuming that context re renders, even those that only use part of it. This can be a performance trap for frequently changing values.
- Split large contexts so unrelated updates do not cascade.
- Keep stable values out of the same context as volatile ones.
- For fast changing app state, a dedicated store with selectors often beats context.
Prop drilling a level or two is fine and explicit. Reach for context when the depth or breadth makes drilling painful.
Key idea
Use context for stable global values to avoid drilling, but split contexts and prefer a store with selectors for frequently changing state.