Prop Drilling
February 27, 2025
We manage state by keeping the state variables at the lowest common ancestor of the components that need them.
In the fig. the component c4 needs the same props as that of c3 and hence it has been stored in c1 according to the LCA principle. However to use the state in c4 we need to drill down the props through the component tree.
But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and lifting state up that high can lead to a situation called “prop drilling”.
Prop drilling doesn’t mean that parent re-renders children It just means the syntactic uneasiness when writing code