React useEffect Cleanup: Adım Adım Bellek Sızıntılarını Önleme Rehberi

React'in useEffect Hook'u, bileşenlerin yan etkilerini (veri çekme, abonelikler, DOM manipülasyonu) yönetmek için vazgeçilmezdir. Ancak yanlış kullanım, bileşen unmount olduğunda bile devam eden işlemler nedeniyle bellek sızıntılarına ve hatalara yol açabilir. Bu adım adım rehberde, useEffect cleanup fonksiyonunu doğru şekilde uygulayarak bu sorunları nasıl önleyeceğinizi göstereceğiz. Ayrıca, React useState vs useReducer makalemizdeki state yönetimi ipuçlarıyla da bu bilgileri birleştirebilirsiniz.

1. useEffect'in Temel Yapısını Anlayın

   useEffect, iki parametre alır: bir callback (yan etki fonksiyonu) ve bir bağımlılık dizisi. Callback içinde yan etkiyi tanımlarız. İkinci parametre (opsiyonel) ile efektin ne zaman çalışacağını kontrol ederiz. Boş dizi ([]) sadece mount'ta çalışır, dizide değişken varsa, o değişkenler değiştiğinde tetiklenir. Hiç dizi yoksa her render'da çalışır.

2. Cleanup Fonksiyonu Nedir?

   useEffect callback'i, bir cleanup fonksiyonu döndürebilir. Bu fonksiyon, bileşen unmount olduğunda veya bağımlılıklar değiştiğinde (yeniden çalışmadan önce) çağrılır. Cleanup, abonelikleri iptal etmek, zamanlayıcıları temizlemek ve bellek sızıntılarını engellemek için kullanılır.

3. Adım 1: setInterval ve setTimeout Zamanlayıcılarını Temizleme

   Zamanlayıcılar, bileşen unmount olsa bile çalışmaya devam eder. setInterval örneği:

   useEffect(() => {
     const interval = setInterval(() => {
       console.log('Tick');
     }, 1000);
     return () => clearInterval(interval);
   }, []);
   

   Böylece bileşen kaldırıldığında interval temizlenir. setTimeout için de benzer şekilde clearTimeout kullanılır.

4. Adım 2: API İsteklerini İptal Etme

   Fetch API veya Axios ile yapılan istekler, bileşen unmount olduğunda iptal edilmelidir. Fetch için AbortController, Axios için CancelToken kullanabilirsiniz. Örnek:

   useEffect(() => {
     const controller = new AbortController();
     fetch('/api/data', { signal: controller.signal })
       .then(response => response.json())
       .then(data => setData(data));
     return () => controller.abort();
   }, []);
   

   Bu, gereksiz ağ trafiğini ve boşuna state güncellemelerini önler. Daha fazla API optimizasyonu için REST API'lerde Sayfalama makalemize de göz atabilirsiniz.

5. Adım 3: Event Listener'ları Kaldırma

   DOM veya window'a eklenen event listener'lar temizlenmezse bellek sızıntısına ve yanlış tetiklemelere yol açar. Cleanup fonksiyonunda removeEventListener ile kaldırın:

   useEffect(() => {
     const handleResize = () => console.log(window.innerWidth);
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
   

6. Adım 4: Bileşen Unmount Olduğunda State Güncellemelerini Engelleme

   Asenkron işlemler (örneğin bir API çağrısı) tamamlandığında bileşen unmount olmuş olabilir. setState çağrısı yapmak React'te uyarıya yol açar. Bunu önlemek için bir ref kullanarak unmount durumunu takip edebiliriz:

   useEffect(() => {
     let isMounted = true;
     fetch('...').then(data => {
       if (isMounted) setData(data);
     });
     return () => { isMounted = false; };
   }, []);
   

   Modern React'te AbortController ile isteği iptal etmek daha temiz bir yaklaşımdır.

7. Sık Yapılan Hatalar ve Çözümleri
   • Cleanup fonksiyonunu unutmak: Her zaman abonelikleri ve zamanlayıcıları temizleyin. Özellikle birden fazla useEffect kullanırken hangisinin cleanup gerektirdiğini kontrol edin.
   • Bağımlılık dizisini yanlış belirlemek: Eğer dizi boşsa cleanup sadece unmount'ta çalışır. Eğer bağımlılık varsa, her değişimde eski efekt temizlenir, yenisi çalışır. Diziyi atlamak sonsuz döngüye yol açar.
   • Cleanup fonksiyonunda setState çağırmak: Unmount sonrası setState çağırmak React hatası verir. Bunun yerine ref ile kontrol edin veya isteği iptal edin.
   • Birden fazla useEffect kullanırken sıralama: Her efekt kendi cleanup'ini yönetmeli; bir çatı altında toplamaya çalışmayın.

   useState ve useReducer arasındaki farkları anlamak için ilgili rehberimizi inceleyebilirsiniz.

8. İleri Seviye: Custom Hook ile Cleanup'ı Soyutlama

   Tekrarlayan cleanup desenlerini custom hook'lara taşımak kodunuzu temizler. Örneğin bir useInterval hook'u yazabilirsiniz:

   function useInterval(callback, delay) {
     useEffect(() => {
       const id = setInterval(callback, delay);
       return () => clearInterval(id);
     }, [callback, delay]);
   }
   

   Bu, proje genelinde tutarlılık sağlar ve hata riskini azaltır.

Cleanup fonksiyonunu doğru kullanmak, React uygulamalarınızın performansını ve güvenilirliğini artırır. Yukarıdaki adımları uygulayarak bellek sızıntılarını büyük ölçüde önleyebilirsiniz. Unutmayın, her yan etkinin bir sonu vardır; onu temizlemek sizin elinizde.

Sık Sorulan Sorular

useEffect cleanup fonksiyonu ne zaman çağrılır?

Cleanup fonksiyonu, bileşen unmount olduğunda ve bağımlılıklar değiştiğinde (yeniden çalışmadan önce) çağrılır. Bu sayede eski yan etkiler temizlenir.

Cleanup fonksiyonunda state güncellemesi yapmak güvenli midir?

Hayır, unmount olmuş bir bileşende state güncellemesi yapmak React uyarısına ve bellek sızıntısına yol açar. Bunun yerine isteği iptal edin veya bir ref ile bileşenin monte olup olmadığını kontrol edin.

setInterval'ı temizlemezsem ne olur?

Bileşen unmount olduğunda setInterval çalışmaya devam eder ve gereksiz işlem yapar. Bu, bellek sızıntısına ve uygulamanın yavaşlamasına neden olur.

Boş bağımlılık dizisi ile cleanup nasıl çalışır?

Boş dizi kullanıldığında efekt sadece mount'ta çalışır. Cleanup fonksiyonu yalnızca bileşen unmount olduğunda tetiklenir.