Comparison
Lifting state upvsProp drilling
Lifting state up
two sibling components needed the same value, so you moved it into the parent they share.
Moving state to the closest common ancestor of the components that need it, and passing it back down. It is the standard fix for two components that must agree, and it is what turns a component into a controlled one. The cost is that the ancestor now re-renders on every change, taking its whole subtree with it unless something below is memoised.
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 →