Functional Updates التحديثات الدالية
آخر تحديث: 2026-11-03
Functional Updates التحديثات الدالية
تمرير دالة إلى setState، مثل setCount(c => c + 1)، يعني حساب الحالة التالية من أحدث قيمة سابقة. وحين تجري عدة تحديثات في الحدث نفسه، أو تُقرأ الحالة داخل إغلاق غير متزامن مثل مؤقّت، تصبح هذه الصيغة إلزامية لتجنّب العمل بقيمة قديمة. الفرق غير مرئي في الحالات البسيطة وحاسم في الحالات الصعبة.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
setCount((prev) => prev + 1) // ✅ تعتمد على أحدث قيمة، آمنة عند الاستدعاء المتكرر
setCount(count + 1) // ❌ قيمة إغلاق قديمة، تضيع أثناء التحديثات المجمّعة⚙️ المعاملات
| updater (update function) | دالة نقية تستقبل أحدث قيمة للحالة وتعيد القيمة التالية؛ يجب أن تكون خالية من الآثار الجانبية لأن React قد يستدعيها عدة مرات. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
عدادان مع زر لكل منهما: الضغط على «Functional +3» يضيف ثلاثة بالضبط، بينما يضيف زر «Direct value» واحداً فقط في كل نقرة لأن التحديثات المجمّعة تكتب فوق بعضها — والفرق بين الأسلوبين واضح بالعين.💡 النقاط الأساسية
⚠️ تحذير تُدمج استدعاءات set المتعددة داخل معالج واحد: بالقيمة المباشرة لا يبقى إلا آخر استدعاء، أما التحديثات الدالية فتبني دائماً على القيمة السابقة.
💡 نصيحة داخل الشيفرة غير المتزامنة مثل setTimeout أو استدعاءات الوعود تكون الحالة المُلتقطة قديمة دائماً، فاستخدم التحديثات الدالية هناك.
ℹ️ ملاحظة يجب أن تكون دالة التحديث نقية: قد يستدعيها React أكثر من مرة في الوضع المتزامن للتحقق من النتيجة، والآثار الجانبية تُفسد ذلك.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين setCount(count + 1) و setCount(c => c + 1)؟
ج الأولى تستخدم القيمة القديمة من إغلاق العرض الحالي، فتكتب التحديثات المجمّعة فوق بعضها؛ والثانية تضع التحديثات في قائمة انتظار وتحسب كلاً منها من أحدث قيمة سابقة، فتكون النتيجة صحيحة دائماً.
س لماذا أدّت ثلاث استدعاءات setState متتالية إلى زيادة واحدة فقط؟
ج تقرأ الاستدعاءات الثلاثة setCount(count + 1) القيمة القديمة نفسها، ويدمجها React في واحدة، فلا يُحسب إلا الأخير. واستخدام setCount(c => c + 1) ثلاث مرات يضيف ثلاثة.
س لماذا تكون قيمة الحالة خاطئة عند تحديثها داخل setTimeout؟
ج الإغلاق في استدعاء المؤقّت يلتقط الحالة كما كانت عند إنشاء المؤقّت. استخدم تحديثاً دالياً مثل setX(prev => ...)، أو أعد بناء المؤقّت كلما تغيّرت اعتماديته.
