What is prop drilling and how do you solve it?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
Prop drilling occurs when you pass props down through multiple levels of components just to get data to a deeply nested component — intermediate components receive and pass props they don't actually use. Example: App → Header → Nav → UserMenu where only UserMenu needs the user data, but it passes through Header and Nav unnecessarily. This makes code brittle (every intermediate component must pass the prop), harder to refactor (changing the prop name requires touching every level), and clutters component signatures. Solutions: (1) React Context — provide data at a high level, consume anywhere without passing through intermediaries. (2) Component composition — pass components as children or props instead of data: <Header userMenu={<UserMenu user={user} />} />. (3) State management libraries (Redux, Zustand, Jotai) — store state globally, access from any component. (4) Custom hooks — encapsulate context access. Component composition is often underused and can eliminate prop drilling without introducing context complexity.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.