Zamanlayıcı örneği
- React kursu
- Başlangıç
- Ders 75/84
- 4 dk
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.
Başlangıç kodu
import { useRef, useEffect, useState } from "react";
// Timer bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zamanlayıcı kimliği neden state değil ref?
- Çizim tetiklememek için Doğru cevap
- Daha hızlı çalıştığı için
- State kullanılamaz
- Temizlik gerekmez
Açıklama: useRef ile çizim tetiklemeden kimlik saklanır.
2 Temizlik fonksiyonu
Zamanlayıcıyı temizlemek için ____ çağrılır.Zamanlayıcıyı temizlemek için clearInterval çağrılır.Açıklama: clearInterval ile interval temizlenir.
3 Zamanlayıcı adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
setInterval |
Başlatır |
intervalRef |
Kimlik saklar |
clearInterval |
Temizler |
useEffect |
Yan etki |