useEffect nedir ve ne zaman çalışır?

Question

Accepted Answer

`useEffect` **yan etkileri** çalıştırır — React'in render işleminin dışına çıkan çalışmalar, veri getirme, abonelikler, timerler veya manuel DOM güncellemeleri gibi. Component render edildikten **sonra** çalışır ve yan etkileri render gövdesi dışında tutar (render saf kalmalıdır).

## Dependency array zamanlamayı kontrol eder

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → ilk render'den sonra ve `count` değiştiğinde çalışır.
- **`[]`** (boş) → mount'tan sonra **bir kere** çalışır (tek seferlik kurulum için iyidir).
- **belirtilmemiş** → **her** render'den sonra çalışır (nadiren istediğin şey).

## Neden önemli: bir fonksiyon döndür

Bir effect'in temizlenmesi gereken bir şey kuruyorsa, bir temizlik fonksiyonu döndür. React bunu sonraki effect çalışmadan önce ve component unmount olduğunda çağırır:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Neden önemli

Bunsuz, her çalışma başka bir timer/abonelik eklese ve eski olanı hiç kaldırmaması — klasik bir bellek sızıntısı. `[dep]` effect için yaşam döngüsü: *effect çalıştır → (dep değişir) → temizlik çalıştır → effect yeniden çalıştır*.

**İpucu:** render sırasında hesaplayabileceğin şeyler için effect'leri kullanma (bunun yerine değerleri türet) ve effect'in okuduğu her değeri dependency array'e ekle (the `react-hooks/exhaustive-deps` lint kuralı yardımcı olur).