Prop drilling is het doorgeven van gegevens door veel tussenliggende componenten die ze zelf niet gebruiken, alleen om ze naar een diep geneste component te krijgen die ze wel gebruikt. Het is omslachtig en maakt componenten sterk afhankelijk van gegevens waar ze niet om geven.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, en Nav moeten allemaal user accepteren en doorsturen, ook al gebruiken ze het niet — rommelig, fragiel (hernoem de prop en edit elke laag), en het koppelt niet-gerelateerde componenten.
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 laat elke afstammeling de waarde direct lezen, de tussenliggende lagen overslaan.
✓ 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 een veel voorkomend probleem dat aangeeft dat gegevens veel nodig zijn — als je het herkent, weet je wanneer je Context, een state library, of compositie moet gebruiken.
Het vermijden (wanneer het echt diep is) houdt componenten ontkoppeld en onderhoudbaar.
Maar het oordeel is belangrijk: oppervlakkig drilling is acceptabel en eenvoudiger dan voortijdige abstractie; het doel is diep, herhaaldelijk doorsturen uit te bannen, niet al het doorgeven van props.