useContext()

قراءة قيمة سياق دون تمرير props useContext()

useContext يسمح لأي مكوّن بقراءة قيمة سياق (Context) معرَّفة في مكوّن أعلى، دون تمريرها يدويًا عبر كل مستوى props.

useContext(SomeContext) يُرجع القيمة الحالية للسياق من أقرب مزوّد (Provider) أعلى المكوّن في الشجرة. إن لم يوجد مزوّد، تُستخدَم القيمة الافتراضية الممرَّرة عند إنشاء السياق بـ createContext(defaultValue).

يُستخدَم لبيانات تحتاجها أجزاء متفرّقة من الشجرة (المستخدم الحالي، الوضع الليلي/النهاري، اللغة) دون تمريرها يدويًا كـ props عبر مكوّنات وسيطة لا تحتاجها فعليًا (مشكلة تُعرَف بـ Prop Drilling).

الصياغة

const ThemeContext = createContext("light");

function Toolbar() {
  const theme = useContext(ThemeContext);
  // ...
}

📄 مثال

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>زر</button>;
}

أهم المعاملات

المعامل	الوظيفة
SomeContext	الكائن الناتج عن createContext(defaultValue)

💡 نصائح عملية

غلّف قيمة الموفّر بـ useMemo إن كانت كائنًا يُعاد إنشاؤه كل رندر — لتفادي إعادة رسم كل المستهلكين بلا داع
ليس بديلًا شاملًا عن props — للبيانات المحلّية بين مكوّنين قريبين يبقى تمرير props أبسط

⚠️ أخطاء شائعة

وضع كل حالة التطبيق في سياق واحد ضخم — أي تغيير بسيط يُعيد رسم كل مستهلكيه
توقّع تحديثات انتقائية تلقائية — أي تغيّر بقيمة السياق يُعيد رسم كل المكوّنات المستهلكة له ما لم تُقسَّم السياقات

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار REACT الكامل بالعربي.