إلغاء المؤقتات والعدادات الدورية | دوال تنظيف التأثيرات ودورة حياة useEffect

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كلما أنشأ التأثير مؤقتاً عبر setInterval() أو setTimeout()، احفظ معرّف المؤقت في ثابت محلي داخل دالة التأثير ثم ألغِه فوراً في دالة التنظيف باستدعاء clearInterval(id) أو clearTimeout(id).

ادمج ذلك مع دالة التحديث المعتمدة على القيمة السابقة setSeconds((s) => s + 1) ليعمل العداد بسلاسة دون الحاجة لإعادة إنشاء المؤقت في كل ثانية.

الصف 2 صورة توضيحية

مخطط يوضح دورة حياة التنظيف في useEffect: تشغيل الإعداد عند التركيب ثم تغير الاعتمادية ثم تنظيف الأثر السابق ثم تشغيل الإعداد الجديد

الصف 3 كود برمجي

HTML

useEffect(() => {
  if (!active) return;
  const id = setInterval(() => {
    setSeconds((s) => s + 1);
  }, 1000);
  return () => clearInterval(id);
}, [active]);

جرّب بنفسك

الصف 4 ملاحظة هامة

Cleaning Up Timers Intervals إلغاء المؤقتات والعدادات الدورية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (دوال تنظيف التأثيرات ودورة حياة useEffect)