useEffect'in ikinci parametresi (dependency array) boş bırakıldığında componentDidMount gibi davranması ve dikkat edilmesi gerekenler

Merhaba arkadaşlar, bugün React'te yeni başlayan herkesin (ve bazen tecrübelilerin bile) kafasını karıştıran bir konuya değineceğim: useEffect hook'u ve onun ikinci parametresi olan dependency array (bağımlılık dizisi). Özellikle bu diziyi boş bıraktığımızda neler oluyor, gerçekten componentDidMount gibi mi çalışıyor ve hangi tuzaklara düşebiliriz, hepsini konuşacağız.

Bu hatayı ilk gördüğümde, bir veriyi sürekli fetch eden sonsuz bir döngüye girmiştim ve kafayı yemiştim. Sonra anladım ki, bu küçük köşeli parantezlerin içi sandığımdan çok daha önemliymiş.

useEffect'in İkinci Parametresi Nedir?
`useEffect` hook'u, fonksiyonel component'lerde yan etkileri (side effects) çalıştırmak için kullanılır. Bu yan etki, API'den veri çekmek, abonelik başlatmak veya DOM'u manuel olarak manipüle etmek olabilir.

İkinci parametre ise bir dizidir. Bu dizi, useEffect'in içindeki efektin ne zaman yeniden çalıştırılacağını kontrol eder. İşte sihir burada başlıyor.

Boş Dizi ([]) = componentDidMount Benzeri Davranış
Eğer ikinci parametre olarak boş bir dizi `[]` verirseniz, efekt sadece ve sadece component ilk kez render edildikten sonra (mount olduktan sonra) çalışır. Tıpkı class component'lerdeki `componentDidMount` lifecycle methodu gibi.

Bu, genellikle component ilk yüklendiğinde yapmak istediğimiz işlemler için idealdir.


Dikkat Edilmesi Gereken Büyük Tuzaklar
İşte burası çok önemli. Bu kullanımı güvenle yapabilmek için aşağıdaki noktalara kesinlikle dikkat etmelisiniz.

1. Efekt İçindeki Fonksiyonlar ve State
Efektinizin içinde, component scope'undan gelen bir state veya prop'u kullanıyorsanız ve bu değer zamanla değişebilirse, boş dizi kullanmak BUG'a davetiye çıkarır[/COLOR]. Efekt, ilk render'daki değeri "görür" ve o değere kenetlenir (closure). Sonraki değişiklikleri görmez.

JavaScript:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Bu interval, mount olduğunda BİR KEZ kurulur.
    // 'count' değeri her zaman bu closure'daki değer olan 0'dır!
    const intervalId = setInterval(() => {
      console.log(count); // Her zaman 0 yazar!
      setCount(count + 1); // Her seferinde setCount(0 + 1) olur. BU BÜYÜK SORUN!
    }, 1000);

    return () => clearInterval(intervalId); // Cleanup
  }, []); // Boş dizi, count değişse bile efekti tetiklemez.

  return <div>Sayı: {count}</div>; // Sayı asla 1'in üzerine çıkmaz!
}

Çözüm: Eğer efektiniz içerideki state/prop'a bağımlıysa, o değişkeni dependency array'e eklemelisiniz. Ya da daha iyisi, state updater fonksiyonunun fonksiyonel formunu kullanmalısınız.

JavaScript:

// DOĞRU YÖNTEM: setCount'in fonksiyonel formu
useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1); // En güncel değeri alır.
  }, 1000);
  return () => clearInterval(intervalId);
}, []); // Artık count'a bağımlı değil, güvenle boş dizi kullanılabilir.

2. Eslint Uyarılarını (react-hooks/exhaustive-deps) Görmezden Gelmeyin!
Create React App veya benzeri tool'lar, bu dependency array'i kontrol eden harika bir ESLint kuralı ile gelir. Bu kural, içeride kullandığınız ama array'e eklemediğiniz değişkenleri size söyler. Bu uyarıları asla göz ardı etmeyin. Size potansiyel bug'ları gösteren en iyi dostunuzdur.

Ne Zaman Boş Dizi Kullanmalı?
- Component ilk yüklendiğinde bir API isteği atmak.
- `window.addEventListener` ile bir event listener eklemek (tabi cleanup'unu unutmadan!).
- `setInterval` veya `setTimeout` başlatmak (yukarıdaki fonksiyonel updater kuralına dikkat ederek).
- Third-party bir kütüphaneyi başlatmak (bir chart çizmek gibi).

Son Söz
`useEffect` ve boş dependency array, React'teki en güçlü araçlardan biridir ama doğru kullanılmazsa saatlerinizi alacak hatalara sebep olabilir. Özetle: Efektin içinde kullandığın her değeri düşün, gerçekten bağımlı mı değil mi? ESLint kuralını aktif tut ve uyarılarını dinle.

Peki siz bu konuda ne düşünüyorsunuz? `useEffect` ile ilgili başınıza gelen komik veya can sıkıcı bir sonsuz döngü hikayeniz var mı? Ya da dependency array'leri yönetmek için farklı bir pattern'iniz mi var? Yorumlarda paylaşalım!