Prop drilling is passing data through many intermediate components that don't use it themselves, just to get it to a deeply nested component that does. It's tedious and makes components tightly coupled to data they don't care about.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, and Nav all have to accept and forward user even though they don't use it — noisy, fragile (rename the prop and edit every layer), and coupling unrelated components.
const UserContext = createContext(null);
function App() {
const [user] = useState({ name: "Ann" });
return (
<UserContext.Provider value={user}> {/* provide once at the top */}
<Layout /> {/* no user prop needed anywhere */}
</UserContext.Provider>
);
}
function Avatar() {
const user = useContext(UserContext); // consume directly, skip the middle
return <img alt={user.name} />;
}
Context lets any descendant read the value directly, bypassing the intermediate layers.
✓ Context API → for app-wide/subtree data (theme, user, locale)
✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly
✓ Component composition → pass JSX as children instead of data through props
// composition: let the parent compose the tree, passing the leaf directly
<Layout><Nav><Avatar user={user} /></Nav></Layout>
A little prop drilling (1–2 levels) is FINE and often clearer than adding Context.
Reach for Context/stores when drilling becomes deep or widespread.
Prop drilling is a common pain point that signals data is needed widely — recognizing it tells you when to reach for Context, a state library, or composition.
Avoiding it (when it's genuinely deep) keeps components decoupled and maintainable.
But the judgment matters: shallow drilling is acceptable and simpler than premature abstraction; the goal is to eliminate deep, repetitive forwarding, not all prop passing.