useState يعطي مكون دالة قطعة من الحالة المحلية والتفاعلية. يعيد زوجًا: القيمة الحالية ودالة setter. استدعاء setter يجدول إعادة عرض بالقيمة الجديدة.
const [count, setCount] = ();
(count + );
( c + );
useState يعطي مكون دالة قطعة من الحالة المحلية والتفاعلية. يعيد زوجًا: القيمة الحالية ودالة setter. استدعاء setter يجدول إعادة عرض بالقيمة الجديدة.
const [count, setCount] = ();
(count + );
( c + );
1. التحديثات غير متزامنة / مجمعة. count لا يتغير في السطر الذي يلي setCount؛ له القيمة الجديدة في الرندرة التالية. لذا هذا يزيد فقط مرة واحدة:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
استخدم دالة التحديث الدالية عندما تعتمد القيمة التالية على القيمة السابقة، لأن React تمرر أحدث قيمة:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. القيمة الأولية تُستخدم فقط في الرندرة الأولى. لقيمة افتراضية مكلفة، مرر دالة حتى تعمل مرة واحدة (lazy init):
const [data] = useState(() => expensiveInit()); // runs once, not every render
الحالة هي ما يجعل المكون تفاعليًا — React تعيد تشغيل الدالة وتعيد عرض واجهة المستخدم كلما تغيرت الحالة.
تعامل مع الحالة كـ غير قابلة للتغيير: أنشئ مصفوفة/كائن جديد بدلاً من الطفرة، على سبيل المثال setItems([...items, x])، وإلا قد لا يكتشف React التغيير.