Prop drilling është kalimi i të dhënave përmes shumë komponentëve ndërmjetës që nuk i përdorin ato vetë, vetëm për ta arritur atë në një komponentë thellësisht të ngulitur që ka nevojë për to. Është i lodhshëm dhe e bën komponentët të lidhura fort me të dhëna që nuk u interesojnë.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header dhe Nav duhet të pranojnë dhe të kalojnë user edhe pse nuk e përdorin atë — zhurme, i brishtë (ribëje emrin e prop-it dhe redakto çdo nivel) dhe lidhja e komponentëve të palidhur.
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 lejon çdo pasardhësi të lexojë vlerën drejtpërdrejt, duke kapërcyer shtresat ndërmjetëse.
✓ 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 është një pikë më e zakonshme që sinjalizon se të dhënat janë të nevojshme gjerësisht — ta kuptosh këtë të tregon kur të përdorësh Context, një bibliotekë të gjendjeje ose përbërje.
T'i shmangesh (kur është vërtet i thellë) e mban komponentët të ndara dhe të përshkueshme.
Por gjykimi ka rëndësi: drilling-u i cekët është i pranueshëm dhe më i thjeshtë sesa abstraksioni i parakohshëm; qëllimi është të eleminohet kalimi i thellë, përsëritës, jo i gjithë kalimi i props.