useRef nedir?

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.

Örnek çözümü göster

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;

Kendini test et

useRef ne zaman çizim tetikler?
- İlk çağrıda
- Her değişimde
- Hiçbir zaman
- Her render'da
Cevabı göster

Hiçbir zaman — useRef asla çizim tetiklemez.

useRef erişimi

useRef ile tutulan değere ____ özniteliği ile erişilir.

Cevabı göster

useRef ile tutulan değere current özniteliği ile erişilir.

useRef kavramlarını eşleştir

useRef

Değer tutar
current

Erişim özelliği
State

Çizim tetikler
DOM

Öğeye erişim

Sıradaki ders: DOM erişimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler