Prop drilling är att skicka data genom många mellanliggande komponenter som inte använder den själva, bara för att nå en djupt kapslad komponent som behöver den. Det är tråkigt och gör komponenter tätt kopplade till data de bryr sig inte om.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header och Nav måste acceptera och vidarebefordra user även om de inte använder det — bullrig, skör (byt namn på prop och redigera varje lager) och koppling av orelaterade 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 låter vilken avkomling som helst läsa värdet direkt, utan att gå igenom de mellanliggande lagren.
✓ 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 är en vanlig smärtpunkt som signalerar att data behövs brett — att känna igen den berättar när du ska använda Context, ett tillståndsbibliotek eller komposition.
Att undvika det (när det är verkligen djupt) håller komponenter frikopplade och underhållbara.
Men bedömningen spelar roll: grunt drilling är acceptabelt och enklare än förutseende abstraktion; målet är att eliminera djup, repetitiv vidarebefordring, inte all prop-skickning.