يتيح لك Context مشاركة قيمة مع شجرة فرعية كاملة دون تمرير props عبر كل مستوى (prop drilling). تنشئ context، تلف شجرة فرعية في Provider الخاص بها، وأي عنصر نسل يقرأه باستخدام useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
بيانات بتكرار منخفض و "عامة نوعًا ما" يحتاجها العديد من المكونات: theme، المستخدم الحالي، locale، feature flags.
عندما يتغير value الخاص بـ Provider، كل مكون يستهلك context يعيد التصيير — لا توجد طريقة للاشتراك في جزء منه فقط. عاقبتان عمليتان:
// ❌ 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}>
بالنسبة للحالة المتغيرة بشكل متكرر أو الكبيرة، قسّم context إلى أجزاء أصغر، أو استخدم store (Zustand/Redux) يدعم الاشتراكات الانتقائية. Context هو أداة dependency-injection، وليس مدير حالة كامل.