What is prop drilling in React?
Awareness of coupling when props tunnel through indifferent layers.
Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext.
Using Context for every prop.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
In which scenario is replacing prop drilling with React Context most justified?
- a.When a parent passes a prop directly to its immediate child
- b.When you want to eliminate all prop passing from your application
- c.When data must travel through several components that do not use it themselves to reach a deep descendantCorrect
- d.When a callback prop controls a form input's value
Why? this is the answer
Prop drilling is threading props through intermediate components that do not need the data to reach a deep descendant, which is the specific architectural pain that justifies Context. Eliminating all prop passing is wrong because doing so adds indirection, obscures data flow, and can trigger broad re-renders when shallow prop passing is still perfectly fine.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #prop-drilling
- #usecontext
- #component-coupling
- #architecture
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles