Prop drilling hu t-trasmissjoni tad-data permezz ta' ħafna komponenti intermedji li ma jużawhix bihom infushom, biss biex jilħqu komponenti nested fond li għandha bżonn. Huwa tedjaż u jagħmel il-komponenti strettament akkoppjati mad-data li m'hu importantli lilhom.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, u Nav kollha għandhom jaċċettaw u jippassa user anke jekk ma jużawhux — ħamjem, fragili (ibdel isem il-prop u edita kull saff), u għaqqad komponenti li m'hu relatati.
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 tippermetti lil kwalunkwe dixxendenti jaqra l-valur direttament, biex ijgħaddu l-isfar intermedji.
✓ 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 hu problema komuni li tindika li d-data meħtieġa ħamsa — jirrikonoxxiha jgħidlek meta tiltaqa' Context, librerija tal-istat, jew composition.
T-tijb tiegħu (meta huwa ħares fond) iħalli l-komponenti mħallsa u maintenibbli.
Iżda l-ġudizzju huwa importanti: drill gass huwa aċċettabbli u aktar semplic minn abstrakzjoni prematura; l-għan huwa t-tneħħija tal-forwarding fond u repetit, mhux il-passaġġ kollu ta' prop.