useRef

useRef ile mutable referans öğrenirsin.

useRef nedir?

useRef mutable (değiştirilebilir) bir referans tutan hook'tur. const ref = useRef(0) yazdığında ref.current ilk değer olarak 0 olur. ref.current = 5 atamasıyla değerini değiştirirsin; bu atama yeniden render tetiklemez.

İki yaygın kullanım vardır: birincisi bir DOM düğümüne veya bileşene erişmek (örnek <TextInput ref={inputRef} />); ikincisi yeniden render tetiklemeden tutulan bir değer saklamak (örnek zamanlayıcı kimliği). useRef'i react paketinden içe aktar: import { useRef } from "react";.

ref ile TextInput'a eriş

React Native'te ref özniteliği ile bir TextInput'a erişebilirsin. const inputRef = useRef(null) yazıp <TextInput ref={inputRef} /> verirsin. Sonra inputRef.current.focus() ile programlı olarak odaklanırsın.

Bu desen form ekranlarında çok kullanışlıdır: kullanıcı bir butona basınca bir sonraki alana otomatik geçiş yaptırabilirsin. ref.current başlangıçta null olur; bileşen mount olduğunda React düğümü atar, unmount olduğunda tekrar null yapar.

Uygulama useRef ile sayaç tut

Bir Counter bileşeni yaz. useRef ile countRef oluştur (ilk değer 0). Bir butona basıldığında countRef.current'i bir artır ve console.log ile yaz. Bileşen <Text>Sayaç</Text> döndürsün.

Örnek çözümü göster

import { useRef } from "react";
import { Text } from "react-native";

function Counter() {
  const countRef = useRef(0);
  function handlePress() {
    countRef.current += 1;
    console.log(countRef.current);
  }
  return <Text>Sayaç</Text>;
}

Kendini test et

ref.current değişince ne olur?
```
const ref = useRef(0);
ref.current = 5;
```
- Bileşen yeniden render edilir
- Bileşen kaldırılır
- Hata fırlatılır
- Hiçbir şey olmaz, yeniden render tetiklenmez
Cevabı göster

Hiçbir şey olmaz, yeniden render tetiklenmez — useRef ataması render tetiklemez.

ref özniteliğini ekle

<TextInput ____={inputRef} placeholder="Ad" />

Cevabı göster

<TextInput ref={inputRef} placeholder="Ad" />

Kavramı rolüne eşle

useRef

Mutable referans
ref.current

Tutulan değer
null

İlk değer
focus()

Odağı programlı kurar

Sıradaki ders: useMemo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler