What is prop drilling and how do you solve it?

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.