What is prop drilling and how does Context solve it?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Prop drilling threads props through intermediate components that don't use them, just to reach deeper ones. Context lets a provider broadcast values that any descendant consumes directly via useContext — no middle layers involved.
Detailed explanation
When deeply nested components need data owned far up the tree, passing it through every level pollutes intermediate components with irrelevant props and makes refactors brittle. Context creates a subscription channel: create a context, wrap a subtree in <Context.Provider value={...}>, and any descendant calls useContext(Context) to receive the current value. It shines for genuinely ambient data — theme, locale, authenticated user, feature flags. Costs to acknowledge: every consumer re-renders when the context value changes (so memoize the value object), it couples consumers to implicit dependencies making reuse harder, and it's not a state manager — no caching, retries, or devtools story for mutations. Common pattern: context for low-frequency global data, component props for everything else, libraries like Zustand or TanStack Query for server/app state at scale.
Official docs:React docs: Passing Data Deeply with Context
Example
const ThemeContext = createContext<'light' | 'dark'>('light');
<ThemeContext.Provider value={theme}>
<Layout /> {/* middle layers no longer need theme */}
</ThemeContext.Provider>
function Button() {
const theme = useContext(ThemeContext);
return <button className={theme}>Go</button>;
}Interview tip
Define drilling with a quick three-component example, then immediately balance with the costs — value memoization and re-render blast radius show production experience.
Common mistakes
- Using Context for rapidly-changing server data, causing mass re-renders.
- Forgetting to memoize the provider value object.