React.Js useRef() Kullanımı

React.Js useRef() Kullanımı

useRef()

useRef React'ta bir hook'tur ve bileşenler arasında referanslar oluşturmayı sağlar. Bu hook, genellikle DOM elemanlarına doğrudan erişim sağlamak, önceki değerleri saklamak veya değişkenleri bileşen dışında saklamak için kullanılır. useRef bir referans objesi döndürür ve bu objenin .current özelliği, referansın mevcut değerini tutar.

Kullanımı

useRef'in temel kullanımı oldukça basittir:

const myRef = useRef(initialValue);

• initialValue: İlk değer (opsiyonel).
• myRef.current: Referansın mevcut değeri.

Örnekler

DOM Elemanına Erişim

import React, { useRef, useEffect } from 'react';
function App() {
const inputRef = useRef(null);
useEffect(() => {
// Otomatik olarak input'a odaklan
inputRef.current.focus();
}, []);
return <input ref={inputRef} />;
}

Önceki Değerleri Saklama

import React, { useRef, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
useEffect(() => {
countRef.current = count; // Her render'da güncelle
}, [count]);
useEffect(() => {
setTimeout(() => {
console.log(`Previous count: ${countRef.current}`);
}, 3000);
}, []);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

Dikkat Edilmesi Gerekenler

• useRef'in döndürdüğü referans objesinin .current özelliği değiştirildiğinde bileşen yeniden render olmaz. Bu, değişkenleri bileşen dışında saklamak için yararlı olabilir.
• useRef yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• useRef hook'u, DOM manipülasyonları, önceki değerleri saklama veya değişkenleri bileşen dışında saklama gibi çeşitli kullanım senaryoları için oldukça yararlıdır. Ancak, durum yönetimi veya yan etkiler için genellikle useState veya useEffect gibi diğer hook'lar daha uygun olacaktır.