useState()

خطّاف الحالة المحلّية useState()

useState يعطي المكوّن قيمة تُحفَظ بين عمليات العرض، مع دالة لتحديثها تُعيد رسم المكوّن تلقائيًا.

useState(initial) يُرجع مصفوفة من عنصرين: القيمة الحالية، ودالة لتحديثها. أي استدعاء لدالة التحديث يُعلِم React أن يُعيد رسم المكوّن بالقيمة الجديدة.

إن مُرِّرت دالة للتحديث بدل قيمة مباشرة (مثل ((prev) => prev + 1))، يستقبل React أحدث قيمة تلقائيًا — وهذا الأسلوب أكثر أمانًا عند تحديثات متتالية سريعة لأنه لا يعتمد على متغيّر الرندر الحالي.

الصياغة

const [state, setState] = useState(initialValue);

📄 مثال

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      عدد الضغطات: {count}
    </button>
  );
}

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

المعامل	الوظيفة
initialValue	القيمة الابتدائية — أو دالة تُحسَب مرة واحدة فقط عند أول عرض (Lazy Initial State)
state	القيمة الحالية المتاحة للقراءة أثناء الرندر
setState	دالة التحديث — تقبل قيمة مباشرة أو دالة (prev) => next

💡 نصائح عملية

مرّر دالة لـ initialValue إذا كان حسابها مكلفًا — تُنفَّذ مرة واحدة فقط لا في كل رندر
استخدم التحديث الدالّي (prev) => ... عند بناء القيمة الجديدة اعتمادًا على القديمة

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

تعديل القيمة مباشرة (state.push(...)) بدل استدعاء setState — React لا يكتشف التغيير فيُعيد الرندر
استدعاء setState بنفس القيمة الحالية متوقّعًا إعادة رندر — React يتجاهل التحديث إذا كانت القيمة مطابقة

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