Prop drilling ist das Weitergeben von Daten durch viele Zwischenkomponenten, die es selbst nicht verwenden, nur um es zu einer tief verschachtelten Komponente zu bringen, die es tut. Es ist mühsam und macht Komponenten eng an Daten gekoppelt, die sie nicht interessieren.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header und Nav müssen alle user akzeptieren und weitergeben, obwohl sie es nicht verwenden — laut, fragil (prop umbenennen und jede Schicht bearbeiten) und nicht zusammenhängende Komponenten koppeln.
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 ermöglicht es einem beliebigen Nachkommen, den Wert direkt zu lesen und dabei die Zwischenschichten zu umgehen.
✓ 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 ist ein häufiges Schmerzproblem, das signalisiert, dass Daten weit verbreitet benötigt werden — das Erkennen sagt Ihnen, wann Sie zu Context, einer State-Bibliothek oder Komposition greifen sollten.
Das Vermeiden (wenn es wirklich tief ist) hält Komponenten entkoppelt und wartbar.
Aber das Urteilsvermögen zählt: Flaches drilling ist akzeptabel und einfacher als vorzeitige Abstraktion; das Ziel ist es, tiefe, wiederholte Weitergabe zu eliminieren, nicht das gesamte prop passing.