تابع Cleanup در useEffect – جلوگیری از Memory Leak در React

تابع cleanup (پاکسازی) که از useEffect return می‌کنید، قبل از اجرای مجدد effect یا هنگام unmount کامپوننت فراخوانی می‌شود. بدون cleanup، listenerها و intervalها جمع می‌شوند و memory leak و افت عملکرد ایجاد می‌کنند.

cleanup کی اجرا می‌شود؟

1. قبل از اجرای مجدد همان effect (وقتی dependency عوض شود)
2. هنگام unmount — وقتی کامپوننت از DOM حذف شود

مثال ۱: Event Listener

import { useEffect } from "react";

export default function Sample() {
  useEffect(() => {
    const clickHandler = () => {
      console.log("روی پنجره کلیک شد");
    };

    window.addEventListener("click", clickHandler);

    return () => {
      window.removeEventListener("click", clickHandler);
    };
  }, []);

  return <div>روی صفحه کلیک کنید</div>;
}

بدون removeEventListener، با هر mount یک listener اضافه می‌شود و با هر کلیک چند بار log چاپ می‌شود.

مثال ۲: Interval / Timer

import { useEffect, useState } from "react";

export default function Timer() {
  const [count, setCount] = useState(0);

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

    return () => {
      clearInterval(interval);
    };
  }, []);

  return <h1>{count}</h1>;
}

با clearInterval در cleanup، تایمر بعد از unmount ادامه پیدا نمی‌کند.

چرا cleanup ضروری است؟

چرخه حیات + cleanup (خلاصه)

• Mount → effect اجرا می‌شود
• Update → cleanup قبلی، سپس effect جدید
• Unmount → cleanup نهایی

جمع‌بندی

تابع cleanup بخش جدایی‌ناپذیر useEffect برای منابع بیرونی است: listener، timer، WebSocket، subscription. هر چیزی setup می‌کنید، در return همان effect برعکس آن را انجام دهید. این عادت از memory leak جلوگیری و اپ React را پایدار نگه می‌دارد.