Prop drilling je posredovanje podatkov skozi številne vmesne komponente, ki jih same ne uporabljajo, samo zato, da jih pripeljejo do globoko ugnezdene komponente, ki jih potrebuje. To je dolgočasno in naredi komponente tesno povezane s podatki, ki jih pravzaprav ne potrebujejo.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header in Nav morajo sprejeti in posredovati user, čeprav ga ne uporabljajo — hrompasto, krhko (preimenuj prop in uredi vsak nivo) in povezovanje nepovezanih komponent.
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 omogoča kateremukoli potomcu, da prebere vrednost neposredno, mimo vmesnih nivojev.
✓ 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 je pogosta težava, ki kaže, da so podatki potrebni na širšem območju — prepoznavanje tega ti pove, kdaj se obrniti na Context, knjižnico za stanje ali komponiranje.
Izogibanje mu (kadar je res globok) komponente drži razvojne in vzdrževane.
A presoja je pomembna: plitvo drilling je sprejemljivo in enostavnejše kot prezgodnja abstrakcija; cilj je odpraviti globoko, ponavljajoče se posredovanje, ne pa vso posredovanje props.