Detailed explanation
Prop drilling happens when data or callbacks are passed through several component levels mainly to reach a deeply nested component. For example, App owns the logged-in user, but ProfileDetails needs it inside Layout and Sidebar. If Layout and Sidebar merely forward the user prop without using it, they become unnecessary links in the data flow. This is not automatically wrong: explicit props are easy to trace and often work well for small component trees. The problem is maintenance when unrelated intermediate components must change whenever a descendant’s data requirements change.
Before adding a state-management solution, check whether component composition can remove the forwarding. App can create <ProfileDetails user={user} /> and pass that element to Layout or Sidebar through children or a named slot prop. Those components then arrange content without knowing about user. Also keep state close to the components that actually need it; lifting everything to the application root often creates avoidable drilling. Composition is especially useful when the issue is component structure rather than broadly shared state.
Context lets a provider make a value available to descendants without intermediate components forwarding it. Define const UserCtx = createContext(null), wrap the relevant subtree with <UserCtx.Provider value={user}>, and call const user = useContext(UserCtx) inside ProfileDetails. React reads the nearest matching provider above that consumer. The null argument is a fallback used when no matching provider exists; it does not create user state. A provider can distribute state owned by useState or useReducer, along with update functions.
Choose a state library when shared state needs more structured updates, selective subscriptions, or debugging support. Context is useful for values such as theme, locale, or current-user information, but it is not automatically a performance optimisation. React compares provider values using Object.is; a changed value causes consuming components to re-render, even if they only use an unchanged part of that value. Splitting contexts or stabilising object values can reduce unnecessary updates. Interviewers usually look for this judgement: start with local state and props, use composition or context where appropriate, and introduce a store for concrete needs rather than replacing every prop.
Key points to remember
- Prop drilling means intermediate components forward props mainly for deeper descendants.
- A few explicit prop layers are often simpler than adding shared-state infrastructure.
- Composition with children or named slots can remove unnecessary forwarding.
- useContext reads the nearest matching provider; context distributes values but does not own state.
- Choose context or a state library based on sharing needs, update patterns, and subscription requirements.
Common mistakes candidates make
- Treating all prop passing as a problem and moving every value into context.
- Calling useContext without placing a matching provider above the consumer and expecting shared state.
- Assuming context prevents re-renders or only updates consumers whose accessed fields changed.
Likely follow-up questions
How does composition avoid prop drilling?
The component that owns the data creates the data-dependent child and passes that element through children or a named slot. Intermediate components render the supplied content without accepting and forwarding its individual data props.
Does React.memo prevent re-renders caused by context changes?
No: a component that consumes context still re-renders when that context value changes, even when wrapped in React.memo. Splitting contexts by responsibility and avoiding unnecessarily recreated provider objects can help.
When would you choose a state library instead of context?
Consider a library when shared state has complex update flows, frequent changes, or needs selector-based subscriptions and stronger debugging tools. Context with useState or useReducer is often sufficient for simpler shared state.
Interview tip: Explain one concrete drilling chain, show how composition or context removes it, and finish with the trade-off rather than presenting a universal fix.