React useRef Nedir? React useRef Kullanımı

Merhaba arkadaşlar, React yazı serimize devam ediyoruz. Bu yazımızda React useRef Nedir? React useRef Kullanımı’na bakacağız. React öğrenirken çok fazla karşınıza çıkmasa da bazı projelerinizde bunu kullanmanız gerekebilir. Şimdi React useRef Nedir ona bakalım.

React useRef Nedir?

React useRef, React.js’in sunduğu bir hook’tur. Hook’lar, React componentleri içinde state ve yaşam döngüsü metotları olmaksızın stateful (durum tutan) işlevsellik eklememize yardımcı olur. useRef, belirli React componentlerinde DOM düğümlerine veya diğer değerlere referans almak için kullanılır. Ayrıca Ref’ler , DOM elemanlarına Javascript’deki selectorlar gibi (getElementById, getByClassName) erişmemizi sağlayan yapılardır. Elementlere verilen “ref” değeri ile onlara ulaşmak mümkündür.

React useRef Neden Kullanılır?

Bir React componenti içinde, genellikle DOM düğümleriyle veya başka değerlerle etkileşimde bulunmak istediğimiz durumlar olabilir. Örneğin, bir formda bir input alanına odaklanmak, belirli bir DOM düğümünün boyutunu veya konumunu almak, veya bir animasyon başlatmak için bir DOM düğümüne erişmek gerekebilir. Bu gibi durumlarda useRef kullanmak bize bazı avantajlar sağlar.

React useRef Kullanmanın Bize Faydası Nedir?

DOM Erişimi: useRef, doğrudan DOM düğümlerine erişmemize olanak tanır. Böylece, DOM üzerindeki işlemleri kolayca yapabilir ve düğümlerle etkileşime geçebiliriz.
Değerlerin Saklanması: useRef, function componentlerinde componentin yeniden render edilmesine rağmen değerlerin korunmasına yardımcı olur. Böylece, component her render edildiğinde değişmeyen bir değer saklayabiliriz.
Yeniden Renderlarda Performans Artışı: useRef kullanarak bazı değerleri saklamak, bu değerlerin değiştiğinde bile componentin yeniden render edilmemesine yardımcı olabilir. Bu durumda performans artışı elde edebiliriz.

React useRef Kullanımı

Örnek 1: DOM Referansı Alma: Örneğin, bir butona tıklandığında bir input alanına odaklanmak istediğimiz bir senaryo düşünelim.

import { useRef } from 'react';
const InputWithFocus = () => {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={handleClick}>Odaklan</button>
</div>
);
};
export default InputWithFocus;

import { useRef } from 'react';

const InputWithFocus = () => {

const inputRef = useRef(null);

const handleClick = () => {

inputRef.current.focus();

};

return (

<div>

<button onClick={handleClick}>Odaklan</button>

</div>

);

};

export default InputWithFocus;

Yukarıdaki örnekte, useRef kullanarak input elementine bir referans oluşturduk ve tıklanıldığında input alanına odaklanmak için bu referansı kullandık.

Çıktı:

Örnek 2: Önceki Değerin Saklanması: Örneğin, bir bileşen içinde bir değeri saklamak ve bu değerin değişmesine rağmen bileşenin yeniden render edilmemesini istediğimiz bir senaryo düşünelim.

import { useState, useRef } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
prevCountRef.current = count;
const handleIncrement = () => {
setCount((prevCount) => prevCount + 1);
};
return (
<div>
<p>Count: {count}</p>
<p>Previous Count: {prevCountRef.current}</p>
<button onClick={handleIncrement}>Artır</button>
</div>
);
};
export default Counter;

import { useState, useRef } from 'react';

const Counter = () => {

const [count, setCount] = useState(0);

const prevCountRef = useRef();

prevCountRef.current = count;

const handleIncrement = () => {

setCount((prevCount) => prevCount + 1);

};

return (

<div>

<p>Count: {count}</p>

<p>Previous Count: {prevCountRef.current}</p>

<button onClick={handleIncrement}>Artır</button>

</div>

);

};

export default Counter;

Yukarıdaki örnekte, useRef kullanarak önceki count değerini saklayabiliyoruz. Her artış yapıldığında, önceki değeri güncel değeri ile karşılaştırarak ekrana basıyoruz. Bu şekilde, component yeniden render edilse bile önceki değer korunur.

Sonuç olarak, React useRef, React componentlerinde DOM düğümlerine ve diğer değerlere referans almak için kullanılan bir hook’tur. Bu sayede, React uygulamalarında DOM manipülasyonları yapmak ve bazı değerleri saklayarak performans artışı sağlamak mümkündür.

Çıktı:

Umarım “React useRef Nedir? React useRef kullanımı” başlıklı yazım sizin için faydalı olmuştur. useRef kullanımı ile ilgili sorunuz olursa yorum kısmından sormayı unutmayın.

Şu yazılar da ilginizi çekebilir.

React State Nedir? React State kullanımı

Happy coding!

Kaynaklar

react.dev

w3schools.com

React useRef Nedir? React useRef Kullanımı