प्रॉप ड्रिलिङ् भनेको डेटा धेरै मध्यवर्ती कम्पोनेन्टहरूको माध्यमबाट पास गर्नु हो जसले यसलाई आफैले प्रयोग गर्दैनन्, केवल गहिराइमा रहेको कम्पोनेन्टमा पुग्नको लागि जसले यसलाई प्रयोग गर्छ। यो कठिन र कम्पोनेन्टहरूलाई डेटामा कडा जोडिएको बनाउँछ जसको उनीहरूलाई सरोकार छैन।
() {
[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, स्टेट लाइब्रेरी, वा कम्पोजिशनको लागि पहुँच गर्न कहिले आवश्यक छ भनी बताउँछ।
यसलाई बेवास्ता गर्नु (जब यो साँच्चै गहिरो छ) कम्पोनेन्टहरूलाई अलग र सधारणीय राख्छ।
तर निर्णय महत्त्वपूर्ण छ: उथलो ड्रिलिङ् स्वीकार्य छ र अकाल अमूर्तीकरणभन्दा सरल छ; लक्ष्य सबै प्रॉप पासिङ् होइन बरु गहिरो, दोहोरिने अगाडि पठाउनु हटाउनु हो।