useState خطّاف الحالة
آخر تحديث: 2026-11-03
useState خطّاف الحالة
يضيف useState متغيّر حالة إلى مكوّن دالي: يعيد القيمة الحالية ودالة تحديث، وأي تغيّر يعيد عرض المكوّن. وكل بيانات الواجهة التي تتغيّر بالتفاعل — حقول الإدخال والمفاتيح والعدادات — تديرها هي.
| المجموعة | العرض والحالة |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const [count, setCount] = useState(0)
// ↑ القيمة الحالية ↑ دالة التحديث ↑ القيمة الأولية (أول عرض فقط)⚙️ المعاملات
| initialState | الحالة الابتدائية. تُستخدم كقيمة الحالية عند أول عرض فقط، وتُهمل بعدها. |
|---|---|
| setCount (setter) | دالة التحديث: مرّر قيمة جديدة أو دالة تحديث تعتمد على القيمة السابقة؛ واستدعاؤها يجدول إعادة عرض. |
القيمة المرجعة：يعيد مصفوفة من عنصرين: [القيمة الحالية، دالة التحديث]. تُفكَّك عادةً بأسماء مخصّصة، ودوال التحديث تبدأ بـ "set" وفق العرف.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
عنوان موسّط «Current count: 0» مع ثلاثة أزرار. زر +1 يزيد، وزر -1 ينقص، وزر Reset يعيد القيمة إلى 0.💡 النقاط الأساسية
💡 نصيحة سمِّ دوال التحديث ببادئة set (setCount / setOpen) لتكون النية واضحة بالعين.
⚠️ تحذير تعديل متغيّر الحالة مباشرة (count = 5) لا يُعيد العرض أبداً — استدعِ دالة التحديث دائماً.
ℹ️ ملاحظة القيمة الابتدائية تسري عند أول عرض فقط؛ وتغيير ذلك التعبير لاحقاً لا يعيد ضبط الحالة أبداً.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا تطبع الحالة القديمة بعد تغييرها مباشرة؟
ج setCount تجدول العرض التالي ولا تُسند فوراً. فالقيمة count في الإغلاق الحالي تبقى قديمة — احسب من القيمة السابقة داخل دالة التحديث.
س هل يمكن أن تكون القيمة الابتدائية لـ useState دالة؟
ج نعم. تمرير دالة يعني تهيئة كسولة — تُستدعى مرة واحدة عند أول عرض، وهي مثالية حين تكون القيمة الابتدائية مكلفة الحساب.
س هل يمكن لمكوّن أن يستخدم useState أكثر من مرة؟
ج نعم، ويُنصح بذلك: افصل المخاوف إلى حالات منفصلة بدل كائن واحد كبير.
