Temizlik fonksiyonu

Effect'in return fonksiyonu ile temizlik yapmayı öğrenirsin.

Temizlik fonksiyonu

Effect bir temizlik fonksiyonu döndürebilir: return () => { ... }. React, bileşen ekrandan gitmeden veya effect yeniden çalışmadan önce bunu çağırır.

Bu, abonelikleri kaldırmak, zamanlayıcıları temizlemek veya bağlantıyı koparmak içindir. Temizlik yapmazsan bellek sızıntısı olur.

Her effect, başlattığı kaynağı temizlemelidir; bu, sorumlu etik kullanımın temelidir.

Abonelik örneği

Bir event aboneliği başlatınca temizlik ile onu kaldırırsın. Örnek: window.addEventListener("resize", fn) başlat, return () => window.removeEventListener("resize", fn) ile temizle.

Bu, "kurulum ve sökme" çiftidir; her başlatma bir sökme gerektirir. Aksi halde abonelik açık kalır ve bileşen kaldırıldıktan sonra da olay tetiklenir.

Bu disiplin, uzun ömürlü uygulamalarda sızıntıyı önler. Bellek sızıntısı en sık event ve zamanlayıcı kaynaklıdır; temizlik bunları tek satırda çözer.

Uygulama Zamanlayıcı effect'i

Aşağıdaki iskeleti tamamla. Timer bileşeni yaz; useEffect'i içe aktar. useEffect çağır; içine const id = setInterval(() => {}, 1000); yaz ve return () => clearInterval(id); döndür; ikinci argüman []. <p>Zamanlayıcı</p> döndür. Dışa aktar.

Örnek çözümü göster

import { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {}, 1000);
    return () => clearInterval(id);
  }, []);
  return <p>Zamanlayıcı</p>;
}

export default Timer;

Kendini test et

Temizlik fonksiyonu ne zaman çağrılır?
```
Cleanup releases the resource.
```
- Effect yeniden çalışmadan önce ve unmount'ta
- Sadece hata durumunda
- Effect başlarken
- Asla
Cevabı göster

Effect yeniden çalışmadan önce ve unmount'ta — Temizlik, effect'ten önce ve bileşen gitmeden çağrılır.

Temizlik fonksiyonu: eksik parçayı tamamla

useEffect(() => { const id = setInterval(fn, 1000); return ____; }, []);

Cevabı göster

useEffect(() => { const id = setInterval(fn, 1000); return () => clearInterval(id); }, []);

Temizlik fonksiyonu: kavramları eşleştir

return () => ...

Temizlik
clearInterval

Zamanlayıcıyı durdur
removeEventListener

Aboneliği kaldır
unmount

Bileşen gider

Sıradaki ders: Özet - useEffect

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler