ما هو useContext وكيف تتصرف المكونات المشتركة عند تحديث قيمة الـ Context Provider؟

الإجابة المختصرة

هو hook يتيح للمكونات قراءة البيانات من Provider أعلى الشجرة مباشرة دون Prop Drilling؛ وعندما تتغير قيمة الـ Provider يعاد تصيير كافة المكونات المستهلكة له تلقائياً.

الشرح

عندما تتغير الخاصية value في الـ Context.Provider، فإن كل مكون يستدعي useContext(MyContext) التابع له يعاد تصييره فوراً بغض النظر عما إذا كان المكون الأب محمياً بـ React.memo أو لا. لتفادي إعادة تصيير المكونات غير المعنية، يفضل تقسيم الـ Contexts حسب تكرار التحديث أو فصل حالة القراءة عن دوال التحديث.

مثال بالكود

const ThemeContext = createContext<'light' | 'dark'>('light');

function DisplayMode() {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>الوضع المختار: {theme}</div>;
}

أخطاء شائعة

• تمرير كائن جديد غير معالج بـ useMemo كـ value للـ Provider، مما يسبب إعادة تصيير لكافة المستهلكين في كل دورة.

أسئلة متابعة

• ما هو useReducer ومتى يفضل اختياره كبديل لـ useState؟

المصادر

• React docs — useContext