A prop drilling adatoknak többek közötti köztes komponenseken keresztüli átadása, amelyek nem is használják azokat, csak hogy eljussanak az adatoknak egy mélyen beágyazott komponenshez, amelyre szüksége van. Unalmas és szorosan összekapcsolja az összetevőket azokkal az adatokkal, amelyekre nem számít.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
A Layout, a Header és a Nav mindegyikének el kell fogadnia és továbbítania kell a user-t, annak ellenére, hogy nem használják — zajos, törékenyek (nevezd át a propot és szerkeszd meg az egyes rétegeket), és nem kapcsolódó komponensek összekapcsolása.
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} />;
}
A Context lehetővé teszi bármely leszármazottnak, hogy közvetlenül olvassa az értéket, megkerülve a köztes rétegeket.
✓ 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.
A prop drilling egy gyakori fájdalmas pont, amely azt jelzi, hogy az adatokra széles körben szükség van — ennek felismerése megmondja, hogy mikor kell a Context-et, az állam-könyvtárat vagy az összeállítást használni.
Ennél az elkerülése (amikor valóban mélyre megy) az összetevőket függetlenné és karbantarthatóvá teszi.
De az ítélet fontos: a sekély fúrás elfogadható és egyszerűbb, mint a korai absztrakció; a cél az mély, ismétlődő továbbítás kiküszöbölése, nem az összes prop átadásé.