useRef ve hesaplama

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.

Örnek çözümü göster

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;

Kendini test et

useRef güncellendiğinde ne olur?
- Bileşen çizilmez
- Bileşen çizilir
- State sıfırlanır
- Hata fırlatır
Cevabı göster

Bileşen çizilmez — useRef güncellendiğinde bileşen yeniden çizilmez.

ref okuma

const lastRef = useRef(null);

if (lastRef.____ !== value) {
  lastRef.current = value;
  compute();
}

Cevabı göster

const lastRef = useRef(null);

if (lastRef.current !== value) {
  lastRef.current = value;
  compute();
}

useRef ve hesaplama: kavramları eşleştir

useRef

Değer tutar
current

Ref özelliği
çizim yok

Ref güncelleme
önbellek

Hesap atlama

Sıradaki ders: Ölçüm yapma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler