What is prop drilling and how do you avoid it?

Question

Accepted Answer

Prop drilling is the pattern of passing data through many layers of components just so a deeply nested child can use it — even though intermediate components don't need it. Tedious, noisy, and brittle to refactor. Context API — React's built-in solution; createContext + useContext share data across the tree without manual passing. State libraries — Redux , Zustand , Jotai , Recoil for app-wide state with finer control over re-renders than Context. Server state libraries — React Query , SWR hold remote data; any component that needs it just calls the hook. Composition — passing children as props or using compound components often eliminates the need to drill at all. Use Context sparingly — every consumer re-renders on context change; split contexts by concern (theme, auth, locale). Show the problem (verbose intermediate components) and multiple solutions (Context, composition, state libraries). Mention that Context is not always the answer — it causes re-renders for all consumers when the value changes.