Comparison
Context providervsProp drilling
Context provider
you put the value at the top of the tree so anything below could read it without being passed it.
A mechanism for making a value available to an entire subtree without threading it through props. It solves prop drilling for genuinely ambient things — theme, locale, the current user, a client instance. It is a poor state container, because every consumer re-renders whenever any part of the value changes, and an object literal as the value means that is every render.
Full entry →Prop drilling
you threaded the same value through four components that do not use it, just to reach the fifth.
Passing data down through intermediate components purely to get it somewhere deeper. It is explicit and easy to trace, which is why it is fine at two levels and unbearable at six: every intermediate component's signature now mentions data it does not care about, and every refactor touches all of them. The alternatives — context, a store, or composing children as elements rather than props — each trade that explicitness for reach.
Full entry →