React • المستوى الثالث • الدرس 4

التنظيف والمشروع التفاعلي (Cleanup Functions)

العودة لفهرس المستوى

أهداف الدرس العلمية

إعادة دالة التنظيف (Cleanup Return) داخل useEffect لتفريغ المؤقتات والأحداث.
حماية التطبيق من تسريبات الذاكرة (Memory Leaks).
استخدام setInterval و clearInterval بأمان.
فهم أن دالة التنظيف تعمل عند Unmount المكوّن.

1. ما هي دالة التنظيف Cleanup؟

دالة التنظيف هي دالة تُرجِعها من داخل useEffect. تُنفَّذ تلقائياً في حالتين:

1️⃣ عند Unmount

عند حذف المكوّن من الصفحة (إغلاق الصفحة أو التنقل).

2️⃣ قبل إعادة التنفيذ

عند تغيّر مصفوفة الاعتماديات، يعاد تشغيل الـ Effect.

2. مثال عملي: مؤقّت لا ينتهي

javascript

useEffect(() => {
  const interval = setInterval(() => {
    setSeconds(prev => prev + 1);
  }, 1000);

  // ✅ دالة التنظيف — أوقف المؤقت عند Unmount
  return () => clearInterval(interval);
}, []);

⚠️ بدون Cleanup

المؤقت يستمر بالعمل حتى بعد حذف المكوّن، مما يسبب تسريب ذاكرة (Memory Leak) وتحديث حالة لمكوّن غير موجود — خطأ في Console!

التطبيق العملي المباشر

تحدي الدرس الرابع: إضافة زر +60 ثانية

قم بالتعديل على الكود في المحرر أدناه:

أضف زراً ثالثاً بعنوان "+60 ثانية ⏩".
اربطه بالحدث onClick لاستدعاء setSeconds(seconds + 60).
اختر لوناً أخضر (#16a34a) لتمييزه عن زر التصفير.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للمستوى الرابع