Prop drilling er at sende data gennem mange mellemliggende komponenter, der ikke bruger det selv, blot for at komme til en dybt indlejret komponent, der gør. Det er kedeligt og gør komponenter tæt knyttet til data, de ikke bekymrer sig om.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header og Nav skal alle acceptere og videresende user selvom de ikke bruger det — støjende, skrøbeligt (omdøb prop'en og rediger hvert lag), og kobler ikke-relaterede komponenter.
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 lader enhver efterkommer læse værdien direkte og omgår de mellemliggende lag.
✓ 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 er et almindeligt smertetema, der signalerer, at data skal bruges bredt — at genkende det fortæller dig, hvornår du skal gribe til Context, et state-bibliotek eller composition.
At undgå det (når det virkelig er dybt) holder komponenter afkoblet og vedligeholdbare.
Men dømmekraften betyder noget: lavt drilling er acceptabelt og enklere end for tidlig abstraktion; målet er at eliminere dyb, gentagen videresendelse, ikke alt prop passing.