Prop drilling shine aikin gida bayar ta hanyar yawancin alaƙa na tsakiya waɗanda ba su amfani da ita, kawai don kawo da ita zuwa abin da aka haɗa da asali wanda yake buƙatarsa. Yana da wahala da kuma yana dambaruwa da abubuwan damuna da kwadanda ba sa ba koma matakin bayani.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, da Nav duka sune dole su karɓi da gabatar da user ko da yake ba sa amfani da ita — jajjige, matalauci (gyara property kuma gyara kowane matakin), da alaƙa ta abubuwan gida waɗanda ba su da alaƙa.
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 yana ƙiyar wa kowa da wada tare kawo da karƙari daidai, wucewa matakai na tsakiya.
✓ 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 shine abubuwan wahala na kowa da kowa da yake nuni cewa ana buƙatarsa data a kauye — sanin da ita yana gida ma abubuwan damuna ne lokacin da za a yi amfani da Context, littafi na state, ko haduwa.
Gida ta gida yana kashe shi (lokacin da shike da gaske zuwakara) ya kashe abubuwan damuna waɗanda ba su da alaƙa da kuma yana gaske.
Amma hukunci ya nuna: gida gida tsageye yana karɓi kuma sarkakke fiye da cikakke; abin damuna shine kawo da zuwakara, maimaita gida, ba kowa property gida.