useRef ve hesaplama
- React kursu
- Orta seviye
- Ders 65/80
- 4 dk
useRef ile yeniden çizim tetiklemeden değer tutmayı öğrenirsin.
useRef ve hesaplama
useRef bir değişkeni çizimler arasında tutmak için kullanılır. State'ten farkı: ref güncellendiğinde bileşen yeniden çizilmez. Bu, hesaplama sonucunu önbelleğe almak için uygundur.
Örneğin bir fonksiyonun önceki sonucunu ref'te tutarsın; aynı girdi tekrar gelirse hesap yapmak yerine ref'ten okursun. Bu, useMemo'ya benzer ama manuel kontrol sağlar.
Ref'in current özelliği doğrudan değiştirilebilir; ancak bu React'in haberi olmadan olur, bu yüzden çizimi tetiklemez.
Hesaplama önbelleği
Ref ile hesaplama önbelleği kurmak yaygındır. Ağır bir hesabın sonucunu ref.current'te tutarsın; aynı girdi tekrar gelirse hesabı atlar, ref'ten okursun. Bu, gereksiz hesabı önler.
Örnek: bir filtre fonksiyonu binlerce öğeyi işliyorsa, son girdiyi ve sonucu ref'te tutmak anlamlıdır. Girdi değişmediyse aynı sonucu döndürürsün.
State yerine ref kullanmanın sebebi: önbellek güncellemesi çizimi tetiklememeli; yalnızca gerçek sonuç değişince çizim yapılmalı.
Uygulama Ref ile önbellek
Aşağıdaki iskeleti tamamla. UseCache bileşeni yaz; useRef(null) ile cacheRef al, cacheRef.current ile önceki değeri kontrol et, farklıysa cacheRef.current = value yap ve hesapla. Dışa aktar.
Başlangıç kodu
import { useRef } from "react";
// UseCache bileşenini buraya yazÖrnek çözüm
import { useRef } from "react";
function UseCache({ value }) {
const cacheRef = useRef(null);
if (cacheRef.current !== value) {
cacheRef.current = value;
compute(value);
}
return <p>{value}</p>;
}
export default UseCache;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useRef güncellendiğinde ne olur?
- Bileşen çizilmez Doğru cevap
- Bileşen çizilir
- State sıfırlanır
- Hata fırlatır
Açıklama: useRef güncellendiğinde bileşen yeniden çizilmez.
2 ref okuma
const lastRef = useRef(null);
if (lastRef.____ !== value) {
lastRef.current = value;
compute();
}const lastRef = useRef(null);
if (lastRef.current !== value) {
lastRef.current = value;
compute();
}Açıklama: ref.current ile saklanan değere erişilir.
3 useRef ve hesaplama: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useRef |
Değer tutar |
current |
Ref özelliği |
çizim yok |
Ref güncelleme |
önbellek |
Hesap atlama |