React
Zamanlayıcı örneği
useRef ile bir zamanlayıcı kimliği saklamayı öğrenirsin.
Zamanlayıcı örneği
useRef'in ikinci tipik kullanımı zamanlayıcı kimliğini (interval id) saklamaktır. setInterval bir kimlik döndürür; bu kimliği clearInterval ile Temizlik için kullanırsın.
Eğer kimliği state'e koyarsan, her güncelleme bir çizim daha tetikler. useRef ise sessizce saklar; çizim tetiklemeden değer yazılır ve okunur.
Örnek: bir saniye sayacı. Butona basınca setInterval başlar, kimliği intervalRef.current'e yazılır. Bileşen kalkınca clearInterval(intervalRef.current) ile temizlik yapılır.
Temizlik ve useRef birlikte
useEffect'in dönüş fonksiyonu temizlik işlevidir. Bileşen kaldırılmadan hemen önce React bu fonksiyonu çağırır. return () => clearInterval(intervalRef.current); satırı zamanlayıcıyı güvenle durdurur.
Eğer temizlik yapmazsan, bileşen kalksa bile zamanlayıcı arka planda çalışmaya devam eder ve state'i güncellemeye kalkışır. Bu, hata ve bellek sızıntısı demektir.
Bu yüzden setInterval kullanan her bileşen, mutlaka bir temizlik fonksiyonu döndürmelidir. useRef + useEffect ikilisi bu disiplini sağlar.
Uygulama Saniye sayacı
Aşağıdaki iskeleti tamamla. Timer bileşeni yaz. intervalRef = useRef(null) oluştur. useEffect içinde setInterval ile her saniye setSeconds'i bir artır; kimliği intervalRef.current'e yaz. Temizlik olarak clearInterval(intervalRef.current) döndür. <p>{ '{ seconds }' }</p> göster. seconds state olarak tutulsun. Dışa aktar.
Örnek çözümü göster
import { useRef, useEffect, useState } from "react";
function Timer() {
const intervalRef = useRef(null);
const [seconds, setSeconds] = useState(0);
useEffect(() => {
intervalRef.current = setInterval(() => {
setSeconds((s) => s + 1);
}, 1000);
return () => clearInterval(intervalRef.current);
}, []);
return <p>{seconds}</p>;
}
export default Timer;
Kendini test et
-
Zamanlayıcı kimliği neden state değil ref?
- Çizim tetiklememek için
- Daha hızlı çalıştığı için
- State kullanılamaz
- Temizlik gerekmez
Cevabı göster
Çizim tetiklememek için — useRef ile çizim tetiklemeden kimlik saklanır.
-
Temizlik fonksiyonu
Zamanlayıcıyı temizlemek için ____ çağrılır.
Cevabı göster
Zamanlayıcıyı temizlemek için clearInterval çağrılır.
-
Zamanlayıcı adımlarını eşleştir
- setInterval
- Başlatır
- intervalRef
- Kimlik saklar
- clearInterval
- Temizler
- useEffect
- Yan etki
Sıradaki ders: Özet - useRef
