प्रॉप ड्रिलिंग म्हणजे डेटा अनेक मध्यवर्ती घटकांद्वारे पास करणे जे स्वतः त्याचा वापर करत नाहीत, फक्त एखाद्या गहिरे नेस्टेड घटकापर्यंत पोहोचण्यासाठी जो त्याची गरज आहे। हे कंटाळवाणे आहे आणि घटकांना डेटाशी घट्टपणे जोडते ज्याचा त्यांना अर्थ नाही।
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, आणि Nav सर्वांनी user स्वीकार आणि पुढे पाठावे लागते जरी ते त्याचा वापर करत नाहीत — गोंधळलेला, नाजूक (प्रॉप पुनर्नामकरण करा आणि प्रत्येक स्तर संपादित करा), आणि असंबंधित घटक जोडा।
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 कोणत्याही वंशजला मूल्य थेट वाचण्याची परवानगी देते, मध्यवर्ती स्तरांचा बाय-पास करून।
✓ 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.
प्रॉप ड्रिलिंग एक सामान्य समस्या आहे जी सूचित करते की डेटा व्यापकपणे आवश्यक आहे — हे ओळखणे आपल्याला सांगते कि Context, state लायब्ररी किंवा composition कधी वापरायचे।
यास टाळणे (जेव्हा ते खरोखर गहिरे असते) घटक असंबद्ध आणि देखभालयोग्य ठेवते।
परंतु निर्णय महत्वाचा आहे: उथळ ड्रिलिंग स्वीकार्य आहे आणि अकाली अमूर्तपणापेक्षा सोपे आहे; लक्ष्य सर्व प्रॉप पास करणे नव्हे, तर गहिरे, पुनरावृत्ती होणारे पुढे पाठवणे दूर करणे आहे।