React'te API İsteklerini İptal Etme: AbortController ve useEffect Temizliği Rehberi

React uygulamalarında bileşen monte edildiğinde başlatılan API istekleri, kullanıcı sayfayı terk ettiğinde veya bileşen unmount olduğunda iptal edilmezse, hafıza sızıntılarına ve gereksiz ağ trafiğine yol açar. AbortController ve useEffect temizleme fonksiyonu bu sorunu çözer. İşte bu yöntemleri kullanarak React'te API isteklerini güvenli bir şekilde iptal etme rehberi.

API İsteğini Neden İptal Etmelisiniz?

React'te bir bileşen içinde useEffect ile veri çekerken, kullanıcı bileşenden ayrıldığında (örneğin, farklı bir sayfaya geçtiğinde) istek hala devam edebilir. Bu durum:

• Hafıza sızıntılarına neden olur (bitmemiş istekler ve state güncellemeleri).
• Gereksiz ağ kullanımı oluşturur.
• Konsol hatalarına yol açar (örneğin, unmount olmuş bileşende state güncellemeye çalışmak).

Bu sorunları önlemek için, API isteklerini iptal edilebilir hale getirmek ve bileşen temizlendiğinde iptal etmek gerekir.

AbortController Nedir ve Nasıl Çalışır?

AbortController, modern tarayıcılardaki fetch API'si ile kullanılabilen bir web API'sidir. Bir sinyal (signal) oluşturur ve bu sinyali fetch isteğine ileterek isteği istediğiniz zaman iptal etmenizi sağlar. Temel kullanımı şöyledir:

const controller = new AbortController();
const signal = controller.signal;

fetch(url, { signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('İstek iptal edildi');
    } else {
      console.error('Hata:', err);
    }
  });

// İsteği iptal et
controller.abort();

Bu yöntem, özellikle kullanıcı bir bileşenden ayrıldığında isteği durdurmak için idealdir.

React'te useEffect ile AbortController Kullanımı

React'te bir API isteğini bileşenin ömrü boyunca yönetmek için useEffect içinde AbortController oluşturun ve temizleme fonksiyonunda iptal edin. İşte adım adım:

1. useEffect içinde AbortController oluşturun: Her efekt çalıştığında yeni bir controller oluşturun.
2. Fetch isteğine signal ekleyin: { signal: controller.signal } parametresini geçin.
3. useEffect temizleme fonksiyonunda controller.abort() çağırın: Bileşen unmount olduğunda veya bağımlılıklar değiştiğinde istek iptal edilir.

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    });

  return () => controller.abort();
}, []);

Bu yaklaşım, bileşen mount olduğunda isteği başlatır ve unmount olduğunda iptal eder. Bağımlılık dizisinde değişken varsa, her değişimde eski istek iptal edilip yenisi başlatılır.

Axios ile İstek İptali: CancelToken vs AbortController

Axios da istek iptali için destek sunar. Eski sürümlerde CancelToken kullanılırken, yeni sürümlerde (v0.22.0+) AbortController desteği eklenmiştir. Axios vs Fetch API karşılaştırması yazımızda detaylı bilgi bulabilirsiniz. Aşağıda Axios ile AbortController kullanımı:

const controller = new AbortController();

axios.get('/api/data', { signal: controller.signal })
  .then(response => setData(response.data))
  .catch(err => {
    if (!axios.isCancel(err)) {
      setError(err.message);
    }
  });

// Temizlik
return () => controller.abort();

Not: Axios'ta iptal edilen istekler axios.isCancel() ile kontrol edilir.

Custom Hook ile Yeniden Kullanılabilir İptal Mantığı

Aynı iptal desenini tekrar tekrar yazmamak için, özel bir hook oluşturabilirsiniz:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);

    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, error, loading };
}

Bu hook'u projelerinizde kullanarak tüm API çağrılarınızı iptal edilebilir hale getirebilirsiniz.

Yaygın Hatalar ve Dikkat Edilmesi Gerekenler

• AbortError'ü yakalamayı unutmayın: İptal edilen istekler hata olarak algılanır; catch bloğunda bu hatayı ayırt edin.
• useEffect'in temizleme fonksiyonunda state güncellemeyin: Unmount sonrası state güncellemek hata verir. İptal sonrası işlem yapmayın.
• AbortController'ı her yeniden render'da sıfırlayın: Bağımlılıklar değiştiğinde eski controller iptal edilip yenisi oluşturulmalıdır.

Alternatif Yaklaşımlar: React Query ve SWR

React Query ve SWR gibi kütüphaneler, istek iptalini otomatik olarak yönetir. Client-Side Veri Önbellekleme: React Query vs SWR yazımızda bu kütüphanelerin sunduğu avantajları karşılaştırdık. Eğer projenizde bu kütüphaneleri kullanıyorsanız, manuel iptal eklemenize gerek kalmaz.

Sonuç

React'te API isteklerini iptal etmek için AbortController ve useEffect temizleme fonksiyonu en güvenilir yöntemdir. Bu yöntemle hem hafıza sızıntılarını önler hem de kullanıcı deneyimini iyileştirirsiniz. AbortController ile iptal edilebilir API istekleri rehberimizde daha fazla pratik ipucu bulabilirsiniz.

Sık Sorulan Sorular

React'te API isteğini iptal etmek için neden AbortController kullanmalıyım?

AbortController, fetch API'si ile uyumlu standart bir web API'sidir. İsteği herhangi bir anda iptal etmenizi sağlar ve React'in useEffect temizleme fonksiyonu ile kolayca entegre edilebilir. Ayrıca Axios gibi kütüphaneler de AbortController'ı destekler.

useEffect temizleme fonksiyonunda state güncellemek güvenli midir?

Hayır, unmount olmuş bir bileşende state güncellemek hafıza sızıntısına ve React uyarılarına yol açar. Bu nedenle, istek iptal edildikten sonra state güncellemesi yapmamalısınız. catch bloğunda AbortError dışındaki hataları ele alın.

React Query veya SWR kullanıyorsam elle iptal eklemeli miyim?

Hayır, React Query ve SWR gibi kütüphaneler, bileşen unmount olduğunda istekleri otomatik olarak iptal eder. Bu kütüphaneleri kullanıyorsanız manuel AbortController eklemenize gerek yoktur. Ancak daha eski veya özel çözümlerde AbortController'ı kullanabilirsiniz.

AbortController sadece fetch ile mi çalışır?

AbortController, fetch API'si için tasarlanmış olsa da, Axios (v0.22.0+), Angular HTTPClient ve diğer modern HTTP kütüphaneleri de AbortController'ı desteklemektedir. Eski Axios sürümlerinde CancelToken kullanılır.