useRef nedir?
- React kursu
- Başlangıç
- Ders 73/84
- 4 dk
useRef ile yeniden çizim yapmadan değer saklamayı öğrenirsin.
useRef nedir?
useRef, bileşen içinde değişebilir bir değer tutan kancadır. const ref = useRef(0); çağrısı { '{ current: 0 }' } benzeri bir nesne döndürür.
State'ten farkı: ref.current değiştiğinde bileşen yeniden çizilmez. Bu, ekranda görünmeyen ama fonksiyonlar arasında paylaşılan veriler için idealdir.
İki tipik kullanım vardır: bir DOM öğesine erişmek (input, div, canvas) ve bir değeri hatırlamak ama değişimde yeniden çizimi tetiklememek. Bu derste önce ikincisine odaklanacağız.
State ve useRef farkı
useState ve useRef ikisi de değer tutar ama fark çizimdedir. setCount çağrısı yeni değer hesaplar ve bileşeni yeniden çizer; ref.current = 5 ise yalnızca değeri yazar, çizim olmaz.
State'i ekranda gösterilen veriler için, ref'i ise ekranda görünmeyen ama kodun hatırlaması gereken veriler için kullan. Örnek: zamanlayıcı kimliği (interval id), bir önceki değer, sayım sayacı.
İkisi birlikte de kullanılabilir: değer değişiminde çizim istiyorsan state, sessizce hatırlamak istiyorsan ref seç.
Uygulama Sayaç ref oluştur
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz. const countRef = useRef(0); satırını ekle. Buton tıklanınca countRef.current'i bir artırsın ve ekrana <p>{ '{ countRef.current }' }</p> yazsın (state ile değil). İlk render'da 0 gösterilsin.
Başlangıç kodu
import { useRef } from "react";
// Counter bileşenini buraya yazÖrnek çözüm
import { useRef } from "react";
function Counter() {
const countRef = useRef(0);
return (
<div>
<p>{countRef.current}</p>
<button onClick={() => { countRef.current++; }}>Artır</button>
</div>
);
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useRef ne zaman çizim tetikler?
- İlk çağrıda
- Her değişimde
- Hiçbir zaman Doğru cevap
- Her render'da
Açıklama: useRef asla çizim tetiklemez.
2 useRef erişimi
useRef ile tutulan değere ____ özniteliği ile erişilir.useRef ile tutulan değere current özniteliği ile erişilir.Açıklama: ref.current ile değere erişilir.
3 useRef kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useRef |
Değer tutar |
current |
Erişim özelliği |
State |
Çizim tetikler |
DOM |
Öğeye erişim |