شرح useEffect Cleanup Function في ريآكت لتجنب تسريب الذاكرة

🧹 إتقان دالة التنظيف useEffect Cleanup Function في React

في الدروس السابقة، تعلمنا كيف نستخدم useEffect لتنفيذ "الآثار الجانبية" (Side Effects) مثل جلب البيانات أو تحديث الواجهة.

لكن، ماذا يحدث عندما يغادر المستخدم الصفحة؟ أو عندما يتم حذف المكون (Component) من الشاشة؟ هنا يأتي دور دالة التنظيف (Cleanup Function).

🧐 ما هي دالة التنظيف (Cleanup Function)؟

ببساطة، دالة التنظيف هي وظيفة تقوم بكتابتها داخل useEffect وتطلب من ريآكت تنفيذها قبل أن يتم تدمير المكون (Unmount) أو قبل إعادة تشغيل التأثير (Effect) مرة أخرى.

تخيل أنك قمت بتشغيل "مؤقت" (Timer) في غرفتك، ثم خرجت من الغرفة وأغلقت الباب. إذا ظل المؤقت يعمل، فإنه يستهلك طاقة دون فائدة. دالة التنظيف هي العملية التي تضمن إطفاء هذا المؤقت قبل مغادرتك للغرفة. 💡

لماذا نحتاج إليها؟

1. منع تسريب الذاكرة (Memory Leaks): لضمان عدم استمرار العمليات في الخلفية بعد اختفاء المكون.
2. تحسين الأداء: إيقاف العمليات غير الضرورية.
3. تجنب الأخطاء: منع تحديث "الحالة" (State) في مكون لم يعد موجوداً في الصفحة.

🛠️ كيف نكتب دالة التنظيف؟

لكي تقوم بعمل "تنظيف"، كل ما عليك فعله هو جعل useEffect تعيد (return) دالة أخرى.

الهيكل الأساسي للكود يكون كالتالي:

useEffect(() => {
  // 1. هنا نكتب الكود الذي نريد تنفيذه (The Effect)
  console.log("Effect is running!");

  // 2. هنا نعيد دالة التنظيف (The Cleanup Function)
  return () => {
    console.log("Cleanup is running!");
  };
}, []); // مصفوفة التبعيات

⏱️ مثال عملي 1: استخدام المؤقت (setInterval)

أكثر مثال شائع لاستخدام دالة التنظيف هو التعامل مع setInterval. إذا أنشأنا مؤقتاً ولم نقم بإيقافه، سيستمر في العمل حتى لو انتقل المستخدم لصفحة أخرى!

لنطبق ذلك برمجياً:

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // إنشاء مؤقت يزيد القيمة كل ثانية
    const intervalId = setInterval(() => {
      setSeconds((prev) => prev + 1);
      console.log("Timer is ticking..."); // سيظهر في الكونسول كل ثانية
    }, 1000);

    // ⚠️ هنا تكمن أهمية دالة التنظيف
    return () => {
      clearInterval(intervalId); // إيقاف المؤقت عند مغادرة المكون
      console.log("Timer stopped and cleaned up!");
    };
  }, []);

  return (
    <div>
      <h1>Seconds Passed: {seconds}</h1>
    </div>
  );
}

export default TimerComponent;

شرح ما حدث في الكود:

1. بدأنا المؤقت باستخدام setInterval وحفظنا معرفه في متغير intervalId.
2. كتبنا return () => { clearInterval(intervalId); }.
3. عندما يقرر ريآكت إزالة هذا المكون من الشاشة، سيقوم فوراً بتنفيذ دالة الـ return وبالتالي يتم إيقاف المؤقت تماماً. ✅

🔄 متى يتم تنفيذ دالة التنظيف بالضبط؟

هناك حالتان أساسيتان يتم فيهما استدعاء دالة التنظيف:

1. عند إلغاء تثبيت المكون (Unmounting): أي عندما يختفي المكون تماماً من واجهة المستخدم.
2. قبل إعادة تشغيل التأثير (Re-running the Effect): إذا كانت useEffect تعتمد على متغير معين في مصفوفة التبعيات (Dependency Array)، فإن ريآكت سيقوم بتنظيف "التأثير القديم" أولاً قبل تنفيذ "التأثير الجديد".

مثال بسيط لتوضيح النقطة الثانية:

useEffect(() => {
  console.log("Effect for ID:", userId);

  return () => {
    console.log("Cleaning up for ID:", userId);
  };
}, [userId]); // ستعمل دالة التنظيف في كل مرة تتغير فيها قيمة userId

⚠️ ماذا يحدث لو تجاهلنا دالة التنظيف؟

إذا نسيت كتابة دالة التنظيف في حالات مثل setInterval أو addEventListener (مستمعي الأحداث)، سيحدث ما يسمى بـ Memory Leak.

النتيجة ستكون:

• استهلاك زائد لرامات الجهاز (RAM).
• بطء في تصفح التطبيق.
• ظهور أخطاء في الكونسول تخبرك بأنك تحاول تحديث حالة مكون تم حذفه بالفعل.

📝 ملخص سريع

• useEffect يمكنها إرجاع دالة تسمى Cleanup Function.
• نستخدمها لإيقاف المؤقتات، إلغاء طلبات الشبكة، أو حذف مستمعي الأحداث.
• تمنع تسريب الذاكرة وتحافظ على سرعة التطبيق.
• تعمل عند خروج المكون من الصفحة أو قبل تحديث التأثير.