Prop drilling means passing data through intermediate components mainly so a deeper component can receive it. Prop drilling itself is not automatically bad. Props are [React](/courses/reactjs)'s normal and explicit way of passing data. It becomes a problem when many components must repeatedly forward information they do not actually use. ### Simple Prop Passing Is Fine ```text ProductPage ↓ product ProductCard ``` This is clear and usually does not need another state-management solution. ### Problematic Prop Drilling Suppose authentication data travels through several layers: ```text App ↓ user Layout ↓ user Header ↓ user Navigation ↓ user UserMenu ``` The intermediate components may exist only to write: ```jsx function Layout({ user }) { return

; } ``` and: ```jsx function Header({ user }) { return ; } ``` Neither component actually needs `user`. ### Why Excessive Prop Drilling Hurts Maintainability If the value changes shape or another dependency is added, several intermediate components may need modification. For example: ```text user permissions theme locale ``` could result in: ```jsx ``` with the same values repeatedly forwarded through the tree. ### Solution 1: Component Composition Sometimes the best solution is not Context but changing component composition. Instead of: ```jsx function Layout({ user }) { return

; } ``` the parent may directly provide the UI that needs the value: ```jsx } /> ``` Now `Layout` does not need to understand the `user` prop. ### Solution 2: Context For genuinely broad shared values: ```text Authenticated user Theme Locale Permissions ``` Context can remove unnecessary forwarding: ```jsx ``` A deep component can then use: ```jsx const user = useContext(AuthContext); ``` without each intermediate component forwarding `user`. ### Solution 3: State Management Library For more complex application-wide state with frequent updates, selectors, or many interacting features, a dedicated state library may be appropriate. Examples include: ```text Redux Toolkit Zustand ``` But introducing a global store simply because a prop passes through two levels is usually unnecessary. ### Do Not Treat Context as the Automatic Fix Replacing every prop with Context creates another problem: hidden dependencies. This: ```jsx ``` clearly tells a reader what `UserCard` requires. This: ```jsx ``` may secretly depend on several contexts. Use Context when the data is genuinely shared broadly, not merely to avoid writing props. ### Practical Decision Guide ```text One or two levels and components use the value? → props are fine Intermediate components only forward it? → composition may help Many descendants need the same value? → Context may help Complex application-wide state? → state-management library may help ``` ### Interview-Ready Answer Prop drilling becomes problematic when several intermediate components pass values they do not use only to reach deeply nested consumers. Simple prop passing is still preferable when data flow is small and explicit. Composition can sometimes remove forwarding, Context works well for broadly shared values, and a state-management library may be appropriate for more complex global coordination.