بازبینی Cleanup در useEffect

---
name: "react-useeffect-cleanup-function"
description: "Effectهای React را طوری پیاده‌سازی و بازبینی کن که Event، Timer، Subscription و Request بدون Leak و Dependency قدیمی پاک‌سازی شوند."
---

# بازبینی Cleanup در useEffect

این Skill را برای پیاده‌سازی Effect، یافتن Memory Leak یا اصلاح Listener، Timer، Subscription و Request تکراری به کار ببر.

## قانون اصلی

Effect، React را با یک سیستم خارجی همگام می‌کند. Cleanup باید دقیقاً همان ارتباطی را که اجرای جاری ساخته است برگرداند. Cleanup پیش از اجرای دوباره Effect با Dependency جدید و هنگام Unmount اجرا می‌شود.

## روند کار

1. ابتدا بپرس آیا Effect لازم است؛ محاسبه خالص و کار مخصوص Event را بیرون Effect نگه دار.
2. تمام منابع خارجی ساخته‌شده در Effect را فهرست کن.
3. Cleanupی برگردان که دقیقاً همان نمونه منبع را آزاد کند.
4. همه مقدارهای Reactive خوانده‌شده را در Dependency قرار بده یا ساختار کد را طوری تغییر بده که دیگر Reactive نباشند.
5. Setup و Cleanup را برای چرخه اضافه Strict Mode در محیط توسعه ایمن کن.
6. Mount، تغییر Dependency، Unmount، Navigation سریع و مسیر خطا را تست کن.

## الگوهای Cleanup

برای DOM Event، همان Target، نوع Event، Handler و Option زمان ثبت را حذف کن. برای Timer شناسه را نگه دار و `clearInterval` یا `clearTimeout` را صدا بزن. برای Socket و Observable، Handle را نگه دار و Unsubscribe یا Close کن.

برای Request، در هر اجرای Effect یک `AbortController` بساز، Signal را عبور بده، در Cleanup آن را Abort کن و Abort عمدی را با خطای واقعی یکی ندان.

```tsx
useEffect(() => {
  const controller = new AbortController();

  loadUser(userId, { signal: controller.signal });
  return () => controller.abort();
}, [userId]);
```

## خطاهای رایج

- ثبت Listener بدون حذف.
- ساخت Function ناشناس تازه در Cleanup به‌جای Handler ثبت‌شده.
- گم‌شدن شناسه Timer میان Renderها.
- حذف‌نکردن Subscription هنگام تغییر Dependency.
- Dependency ناقص و مقدار قدیمی.
- Effect برای کپی Props در State.
- نمایش خطا برای Requestی که عمداً Abort شده است.

برای حل اولیه، Linter مربوط به Hook را خاموش نکن. چرخه عمر منبع را توضیح بده، کوچک‌ترین بخش منسجم را اصلاح کن و روش تست Setup و Cleanup تکراری را گزارش بده.