Cleanup

useEffect cleanup fonksiyonunu öğrenirsin.

Cleanup nedir?

useEffect'in döndürdüğü fonksiyona cleanup denir. Bileşen ekrandan kaldırılmadan (unmount) hemen önce çalışır. Abonelikleri sonlandırmak, zamanlayıcıları temizlemek veya olay dinleyicilerini çıkarmak için kullanılır.

Her efekt çalışmadan önce de cleanup bir kez çağrılır. Bu, eski kaynağı bırakıp yenisini kurmanı sağlar. Cleanup yazmazsan abonelik çoğalması (bellek sızıntısı) yaşanabilir. İşlemi return () => { /* ... */ } şeklinde döndürerek yazarsın.

Cleanup örnekleri

Tipik bir cleanup örneği zamanlayıcıdır. Efekt içinde setInterval başlatılır, döndürülen fonksiyonda clearInterval ile durdurulur. Böylece bileşen kaldırıldığında zamanlayıcı arkada çalışmayı sürdürmez.

İkinci örnek olay dinleyicidir. addEventListener ile dinleyici ekler, cleanup'ta removeEventListener ile çıkarırsın. Cleanup yazmazsan bileşen kaldırılsa bile dinleyici olayları yakalamaya devam eder; bu istenmeyen bir davranıştır.

Uygulama Zamanlayıcı cleanup yaz

Bir Timer bileşeni yaz. useEffect içinde setInterval(() => console.log("çalışıyor"), 1000) başlat. Efektten bir cleanup fonksiyonu döndür; clearInterval(id) çağırsın. Bileşen <Text>Sayaç</Text> döndürsün.

Örnek çözümü göster

import { useEffect } from "react";
import { Text } from "react-native";

function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log("çalışıyor"), 1000);
    return () => clearInterval(id);
  });
  return <Text>Sayaç</Text>;
}

Kendini test et

Cleanup ne zaman çalışır?

Bileşen unmount olunca

Cleanup çağrılır
Efekt yeniden çalışmadan önce

Eski cleanup çağrılır
Abonelik

Cleanup ile bırakılır
Zamanlayıcı

clearInterval ile temizlenir

Cleanup'ı döndür

useEffect(() => {
  const id = setInterval(tick, 1000);
  ____ () => clearInterval(id);
});

Cevabı göster

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});

Cleanup hangi amaçla yazılır?
```
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});
```
- State oluşturmak için
- Bileşeni stillendirmek için
- Kaynağı serbest bırakmak için
- Yeni efekt eklemek için
Cevabı göster

Kaynağı serbest bırakmak için — Cleanup kaynağı serbest bırakır.

Sıradaki ders: useRef

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler