ما الفرق بين تمرير قيمة مباشرة لدالة setState وتمرير دالة تحديث وظيفية (Updater Function)؟

الإجابة المختصرة

تمرير دالة تحديث (Functional Updater) يضمن قراءة أحدث حالة متوفرة في الطابور وحساب القيمة الجديدة بناءً عليها حتى مع وجود تحديثات مجمعة متعددة أو إغلاقات قديمة (Stale Closures).

الشرح

التحديث في ريأكت غير متزامن ومجمع (Batched). إذا قمت باستدعاء setCount(count + 1) ثلاث مرات متتالية داخل نفس معالج الحدث، فستقرأ جميعها نفس قيمة count الأولية وتزيدها بمقدار 1 فقط. أما setCount(c => c + 1) فتأخذ القيمة السابقة من طابور التحديثات وتضمن زيادة القيمة ثلاث مرات.

مثال بالكود

// مثال الزيادة التراكمية الصحيحة
function Counter() {
  const [count, setCount] = useState(0);

  const incrementThreeTimes = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1); // النتيجة النهائية ستكون 3
  };

  return <button onClick={incrementThreeTimes}>القيمة: {count}</button>;
}

أخطاء شائعة

• استخدام setCount(count + 1) داخل دوال غير متزامنة مثل setTimeout أو عند توالي العمليات، مما يسبب مشكلة Stale State.

أسئلة متابعة

• ما هي مشكلة الـ Stale Closures مع useEffect و useCallback وكيف نتغلب عليها؟

المصادر

• React docs — useState: Updating state based on the previous state