What is prop drilling in React?

WHAT THIS TESTS: At the senior level, this question screens for architectural taste, not vocabulary. The interviewer wants to see if you can identify when a component tree has become coupled by transit dependencies, and whether you know the built-in React escape hatch before reaching for external libraries. It also checks if you understand the trade-off: removing prop drilling adds indirection, so you should only do it when the pain is real.

A GOOD ANSWER COVERS: First, a crisp definition: prop drilling is the pattern of passing data through many intermediate component layers that do not themselves need that data, solely to deliver it to a deep descendant. Second, a concrete scenario, such as a user profile object that starts at the App root, flows through Layout and Header, and finally reaches an Avatar component in the top-right corner. Third, the mitigation: mention the useContext hook paired with a Context Provider near the common ancestor, which lets the Avatar subscribe directly without Layout and Header knowing the user exists. Fourth, a nod to trade-offs: Context is not free, it can obscure data flow and trigger broad re-renders if the provided value changes, so prop drilling is still fine for one or two levels.

COMMON WRONG ANSWERS: A red flag is saying prop drilling is always bad and Context should wrap the entire app. Another is confusing prop drilling with controlled components or claiming useReducer is the fix. Some candidates immediately name Redux, Zustand, or MobX without acknowledging that React ships a purpose-built tool for this exact problem. Interviewers also downgrade candidates who describe the scenario in purely abstract terms without naming real components.

LIKELY FOLLOW-UPS: The interviewer may ask how you would avoid unnecessary re-renders when using Context, which opens the door to splitting contexts by value type or memoizing the provided object. They might also ask when you would still prefer prop drilling over Context, expecting an answer about keeping explicit contracts for shallow trees or reusable presentational components. A third follow-up is how React Server Components or URL state affect this pattern in a Next.js application.

ONE CONCRETE EXAMPLE: Imagine a dashboard where the App component holds the currentUser object. The App renders a DashboardLayout, which renders a TopNav, which renders a UserMenu, which finally renders a UserAvatar that needs the avatar URL. DashboardLayout and TopNav do not touch currentUser, yet they must accept and forward it. This is prop drilling. To fix it, you create a UserContext near App, provide currentUser there, and let UserAvatar call useContext(UserContext) directly. DashboardLayout and TopNav drop the prop entirely, making them simpler and more reusable.

Source: react.dev