Unmount
- React Native kursu
- Orta seviye
- Ders 61/116
- 5 dk
Bileşen unmount olayını öğrenirsin.
Unmount
Bir bileşen ekrandan kaldırıldığında unmount olur. Bu, yaşam döngüsünün sonudur. React bileşeni çözer, olay dinleyicilerini ve abonelikleri bırakır.
Unmount sırasında temizlik yapmak için useEffect içine bir cleanup işlevi döndürülür. Bu işlev, bileşen kaldırılmadan hemen önce ya da bir sonraki efektten önce çağrılır.
Cleanup kullanımı
Bir setInterval ya da addEventListener kurduysan bunu temizlemelisin. useEffect içindeki işlevin döndürdüğü cleanup, kaynağı serbest bırakır.
Örnek: useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); }, []). Mount'ta zamanlayıcı kurulur, unmount'ta temizlenir. Bu, bellek sızıntısını önler.
Uygulama Zamanlayıcı kur ve temizle
Bir setInterval kur ve cleanup olarak clearInterval çağır. Bileşen kaldırılınca zamanlayıcı temizlensin.
Başlangıç kodu
import React, { useState } from 'react';
import { Text } from 'react-native';
export default function Clock() {
const [tick, setTick] = useState(0);
// Mount'ta setInterval kur, unmount'ta clearInterval çağır
return <Text>{tick}</Text>;
}Örnek çözüm
import React, { useState, useEffect } from 'react';
import { Text } from 'react-native';
export default function Clock() {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
return <Text>{tick}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Cleanup işlevi ne zaman çağrılır?
- Bileşen kaldırılmadan önce Doğru cevap
- Yalnızca mount sırasında
- Hiçbir zaman
- Sadece stil değişiminde
Açıklama: Cleanup, unmount'tan hemen önce çalışır.
2 Unmount kavramları
| Kavram | Anlamı |
|---|---|
unmount |
Kaldırma anı |
cleanup |
Temizlik işlevi |
return |
Cleanup döndürür |
abonelik |
Bırakılır |
3 Cleanup döndür
useEffect(() => { const id = setInterval(tick, 1000); ____ }, []);useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id); }, []);Açıklama: Cleanup, zamanlayıcıyı unmount'ta temizler.