useEffect dependency array ve cleanup ile ilgili yaygın tuzaklar nelerdir?

Question

Accepted Answer

Bir effect, **dependencies** bağlı olarak yeniden çalışır ve bu array'i yanlış almak #1 React bug kaynağıdır.

## Neden önemli

Bir effect, oluşturulduğu render'dan gelen değerleri yakalar. Bir dependency'yi atlatırsan, eski olanı kullanmaya devam eder:

```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
```

Fix: `count`'u deps'e ekle veya buna ihtiyaç duymayan functional updater kullan (`setCount(c => c + 1)`).

## Pitfall 2: kararsız dependencies → effect her render'da çalışır

Nesneler/diziler/fonksiyonlar her render'da yeniden oluşturulur, bu nedenle her zaman "yeni" olur ve effect hiçbir zaman yerleşmez:

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

Fix: primitive'e bağlı ol (`[id]`), veya `useMemo`/`useCallback` ile memoize et.

## Pitfall 3: unutulan cleanup → sızıntılar ve race conditions

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

Cleanup olmadan, yavaş bir önceki request, daha yeni bir tanesinden *sonra* resolve olabilir ve yeni verilerin üzerine yazabilir (race condition), ve subscriptions/timers birikebilir. `react-hooks/exhaustive-deps` ESLint kuralı çoğu missing-dependency durumunu yakalar.