متى يكون Context حلاً جيداً للحالة ومتى لا يكون؟

Question

Accepted Answer

يتيح لك **Context API** في React مشاركة قيمة مع شجرة مكونات كاملة دون الحاجة إلى تمرير props. وهو رائع للبيانات **منخفضة التكرار والمشتركة على نطاق واسع** — لكنه *ليس* حلاً كاملاً لإدارة الحالة وله مشكلة إعادة rendering للحالة التي تتغير بشكل متكرر. ## متى يكون Context مفيداً ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## المشكلة: إعادة rendering لكل مستهلك عند أي تغيير ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` عندما تتغير قيمة السياق، **جميع** المكونات التي تستهلك هذا السياق تعيد rendering — بغض النظر عما إذا كانت تستخدم الجزء الذي تغير. بالنسبة للحالة التي تتحدث بشكل متكرر، هذا يسبب مشاكل في الأداء. Context ليس لديه اشتراك انتقائي مدمج. ## الحلول البديلة والبديل ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` مكتبات إدارة الحالة (Zustand و Redux و Jotai) تحل مشكلة إعادة rendering من خلال **الاشتراكات الانتقائية** — المكونات تشترك فقط في الأجزاء التي تستخدمها وتعيد rendering فقط عندما تلك الأجزاء تتغير: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context ليس مدير حالة ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## لماذا يهمك معرفة نقطة Context القوية — وحدودها — يمنع خطأين شائعين: تمرير الأشياء التي يجب أن تكون في Context، ووضع حالة عالية التكرار في Context (مما يسبب إعادة rendering على مستوى التطبيق). القاعدة: Context للقيم **نادرة التغيير والمشتركة على نطاق واسع** (theme و user و locale)؛ متجر مخصص مع اشتراكات انتقائية للحالة **المتغيرة بشكل متكرر أو الكبيرة** المشتركة. فهم أن Context يوزع الحالة لكنه لا يديرها يوضح متى يكون كافياً ومتى تحتاج إلى أكثر.