Cleanup
- React Native kursu
- Orta seviye
- Ders 3/116
- 5 dk
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.
Başlangıç kodu
// useEffect'i içe aktar
function Timer() {
// useEffect içinde setInterval başlat; cleanup döndür
return <Text>Sayaç</Text>;
}Örnek çözüm
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>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Cleanup ne zaman çalışır?
| Kavram | Anlamı |
|---|---|
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 |
2 Cleanup'ı döndür
useEffect(() => {
const id = setInterval(tick, 1000);
____ () => clearInterval(id);
});useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Açıklama: Cleanup return ile döndürülür.
3 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 Doğru cevap
- Yeni efekt eklemek için
Açıklama: Cleanup kaynağı serbest bırakır.