Prop drilling and the Context API

WHAT THIS TESTS Whether you can clearly describe the prop drilling problem and explain how Context addresses it, plus show judgment about when Context is the right tool.

A GOOD ANSWER COVERS Prop drilling is when a value needed by a deeply nested component is passed down through many intermediate components that do not use it themselves, purely to forward it along. This bloats component signatures, couples unrelated layers, and makes refactoring painful. React's Context API solves this by letting a Provider publish a value to its entire subtree; any descendant, however deep, reads it directly with the useContext hook, so the intermediate components no longer need to forward the prop. Context fits data that is effectively global and changes relatively infrequently, such as the current theme, the authenticated user, the locale, or a feature-flag set. You wrap the relevant part of the tree in the Provider once and consume it where needed.

COMMON WRONG ANSWERS Confusing Context with a full state management library and using it for high-frequency, rapidly changing state, which causes broad re-renders. Saying Context eliminates all props, when local props are still the right default. Forgetting that every consumer re-renders when the Context value changes by reference. Claiming prop drilling is always bad; for one or two levels, passing props is perfectly fine and simpler.

LIKELY FOLLOW-UPS What performance issue arises when a Context value changes, and how do you mitigate it by splitting contexts or memoizing the value? When would you choose Redux or Zustand over Context? How do you avoid recreating the Provider value object every render?

ONE CONCRETE EXAMPLE An app needs the current theme in a button buried five levels deep. Without Context you would pass theme through five components that only forward it. Instead you create a ThemeContext, wrap the app in ThemeContext.Provider with the theme value, and the deep button calls useContext(ThemeContext) to read it directly. The intermediate components stay clean, and toggling the theme updates all consumers without any manual prop threading.