ما هي الأخطاء الشائعة المتعلقة بمصفوفة التبعيات في useEffect والتنظيف؟

Question

Accepted Answer

يعاد تشغيل التأثير بناءً على **التبعيات** الخاصة به، والحصول على هذه المصفوفة بشكل خاطئ هو أكثر مصدر للأخطاء في React.

## الخطأ 1: التبعيات المفقودة → القيم القديمة

يغلق التأثير على القيم من الـ render التي تم إنشاؤه فيها. إذا حذفت تبعية، فإنه يستمر في استخدام قيمة قديمة:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

الحل: إما أضف `count` إلى deps، أو استخدم functional updater لا يحتاج إليها (`setCount(c => c + 1)`).

## الخطأ 2: التبعيات غير المستقرة → التأثير يعمل في كل render

الكائنات/المصفوفات/الدوال تُعاد إنشاؤها في كل render، لذا فهي "جديدة" في كل مرة والتأثير لا يستقر أبداً:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

الحل: اعتمد على القيمة الأساسية (`[id]`)، أو استخدم memoization مع `useMemo`/`useCallback`.

## الخطأ 3: التنظيف المنسي → تسرب وتنافس

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

بدون التنظيف، قد يتم حل طلب أبطأ أقدم *بعد* طلب أحدث ويستبدل البيانات الطازجة (حالة تنافس)، وستتراكم الاشتراكات/المؤقتات. تقبض قاعدة ESLint `react-hooks/exhaustive-deps` معظم حالات التبعيات المفقودة.