Prop drilling అనేది డేటాను అనేక ఇంటర్మీడియట్ కాంపోనెంట్ల ద్వారా పాస్ చేయడం, అవి దానిని ఉపయోగించవు, ఇది అవసరమైన లోతైన నెస్టెడ్ కాంపోనెంట్కు చేరుకోవడానికి మాత్రమే. ఇది నీరసమైనది మరియు కాంపోనెంట్లను వారు పట్టించుకోని డేటాకు చేరుకోవడానికి చేస్తుంది.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, మరియు Nav అన్నీ user ను అంగీకరించి ఫార్వార్డ్ చేయాలి అయితే అవి దానిని ఉపయోగించవు — శబ్దమయ, సరిభద్రమైనది (prop పేరు మార్చండి మరియు ప్రతి పొర సవరించండి) మరియు సంబంధం లేని కాంపోనెంట్లను కలపడం.
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.
Prop drilling అనేది సాధారణ నొప్పి బిందువు, ఇది డేటా విస్తృతంగా అవసరమని సూచిస్తుంది — దానిని గుర్తించడం Context, స్టేట్ లైబ్ररీ లేదా కాంపోజిషన్ను ఎప్పుడు ఉపయోగించాలో మీకు చెబుతుంది.
దానిని నివారించడం (ఇది నిజంగా లోతైనది ఉన్నప్పుడు) కాంపోనెంట్లను అనుసంధానం చేయని మరియు నిర్వహించదగినదిగా ఉంచుతుంది.
కానీ판断 ముఖ్యమైనది: ఖాళీ drilling అనుమతించదగినది మరియు ముందస్తు సంగ్రహణ కంటే సరళమైనది; లక్ష్యం లోతైన, పునరావృత్తమయ్యే ఫార్వార్డింగ్ను తొలగించడం, అన్ని prop పాసింగ్ను కాదు.