Prop drilling بہت سارے درمیانی components کے ذریعے ڈیٹا منتقل کرنا ہے جو اسے خود استعمال نہیں کرتے، صرف اسے ایک گہرے nested component تک پہنچانے کے لیے جو اسے استعمال کرتا ہے۔ یہ خستہ حال اور components کو ایسے ڈیٹا سے مضبوطی سے منسلک کرتا ہے جو انہیں فکر نہیں ہے۔
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header, اور Nav سب کو user کو قبول اور آگے بھیجنا پڑتا ہے یہاں تک کہ اگر وہ اسے استعمال نہیں کرتے — شوریدہ، نازک (prop کا نام بدلیں اور ہر layer میں ترمیم کریں)، اور غیر متعلقہ components کو جوڑنا۔
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 کسی بھی descendant کو براہ راست value پڑھنے دیتا ہے، درمیانی layers کو نظر انداز کرتے ہوئے۔
✓ 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، ایک state library، یا composition کے لیے کب رجوع کریں۔
اس سے بچنا (جب یہ واقعی گہرا ہو) components کو غیر منسلک اور قابل دیکھ بھال رکھتا ہے۔
لیکن فیصلہ اہم ہے: سطحی drilling قابل قبول ہے اور بروقت abstraction سے سادہ ہے؛ مقصد گہری، بار بار forwarding کو ختم کرنا ہے، نہ کہ تمام prop passing کو۔