Context آپ کو ایک قدر کو پورے subtree کے ساتھ شیئر کرنے دیتا ہے ہر سطح کے ذریعے props پاس کیے بغیر (prop drilling)۔ آپ ایک context بناتے ہیں، اس کے Provider میں ایک subtree کو لپیٹتے ہیں، اور کوئی بھی descendant اسے useContext کے ساتھ پڑھتا ہے۔
= ();
() {
(
);
}
() {
theme = ();
;
}
کم تعدد، "global-ish" ڈیٹا جو بہت سے اجزاء کو ضرورت ہے: theme, current user, locale, feature flags۔
جب Provider کی value بدلتی ہے، ہر component جو context کو استعمال کرتا ہے re-render ہوتا ہے — اس کے صرف ایک حصے کو سبسکرائب کرنے کا کوئی طریقہ نہیں۔ دو عملی نتائج:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
بار بار بدلتی یا بڑی state کے لیے، context کو چھوٹے ٹکڑوں میں تقسیم کریں، یا ایک store (Zustand/Redux) استعمال کریں جو selective subscriptions کو سپورٹ کرتا ہے۔ Context ایک dependency-injection tool ہے، مکمل state manager نہیں۔