Prop drilling to przekazywanie danych przez wiele pośrednich komponentów, które ich sami nie używają, tylko aby dostać się do głęboko zagnieżdżonego komponentu, który ich używa. Jest to żmudne i sprawia, że komponenty są ściśle powiązane z danymi, którymi się nie przejmują.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header i Nav muszą wszystkie zaakceptować i przekazać user mimo że go nie używają — uciążliwe, kruche (zmień nazwę prop i edytuj każdą warstwę), i sprzęgające niepowiązane komponenty.
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 pozwala każdemu potomkowi bezpośrednio odczytać wartość, omijając warstwy pośrednie.
✓ 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 to powszechny problem, który sygnalizuje, że dane są potrzebne szeroko — jego rozpoznanie mówi ci, kiedy sięgnąć po Context, bibliotekę stanu lub komposition.
Jego unikanie (gdy jest naprawdę głębokie) utrzymuje komponenty rozprzęgnięte i łatwe w utrzymaniu.
Ale osąd ma znaczenie: płytkie drilling jest akceptowalne i prostsze niż przedwczesna abstrakcja; celem jest wyeliminowanie głębokich, powtarzających się przekazań, a nie całego przekazywania propsów.