React'ta Ref'lerle Çalışmak için useRef Hook'u

Bu derste ref'lerle çalışacağız. Anlaşılır olması için useRef hook'unun çalışmasını useState hook'u ile karşılaştırarak inceleyelim.

Bir butonu olan bir bileşen oluşturalım:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Bileşene useState import edelim:

import { useState } from 'react';

Ve state state'ini oluşturalım:

const [state, setState] = useState(0);

Şimdi butona tıklandığında state değerimizin 1 artmasını sağlayalım. State değerini butonun metninde göstereceğiz:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Butona tıklama işlemini ele alacak handleStateClick fonksiyonunu tanımlayalım:

function handleStateClick() {
	setState(state + 1);
}

Butona birkaç kez tıklayalım ve state değerinin nasıl arttığını görelim.

Şimdi de state kullanmak yerine, ref kullanarak bir App bileşeni oluşturalım.

Öncelikle, bileşene useRef import edelim:

import { useRef } from 'react';

Ve ref ref'ini oluşturalım. useRef hook'u, ileride bizi ilgilendirecek olan tek bir current özelliği olan bir ref nesnesi döndürür. Başlangıç değerini 0 olarak ayarlayalım:

const ref = useRef(0);

Butonumuza tıklama işleyicisi ekleyelim. Unutmayın, okumamız/güncellememiz gereken ref'in kendisi değil, onun current özelliğidir:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Butonumuza tıklamayı işleyecek fonksiyonu ekleyelim. Burada, state ile yaptığımız önceki örnekteki gibi, current değerini 1 artıracağız. State'i değiştirmek için setState fonksiyonu gerekirken, ref'in özelliğiyle doğrudan çalışırız:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Şimdi butonumuza tıklayalım. Ve ne görüyoruz? Üzerine tıkladığımızda, başlangıçta 0 ne ise öyle kalıyor, değişmiyor.

Elbette, değerin gerçekten değişip değişmediğinden şüphe etmeye başlayabilirsiniz. Hadi bunu kontrol edelim. Bunun için tıklama işleyicisi fonksiyonuna, current değerini konsola yazdıran bir kod satırı daha ekleyelim:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Şimdi, tarayıcıda konsolu açarak, butona tekrar tıklayalım ve değerin her tıklamada gerçekten değiştiğinden ve bir aldatmaca olmadığından emin olalım.

Şimdi görüyoruz ki, state'in aksine, ref değerinin değişmesi bileşenin yeniden render edilmesine neden olmaz. Bu nedenle butonun metninde her seferinde başlangıç değeri 0 görünür.

Böylece, eğer verileriniz render işlemi için kullanılıyorsa, onları state içinde saklayın; eğer render gerekmiyorsa, bu durumda ref'leri kullanmak daha verimli olabilir.

Bileşeninizde metni 'text' olan bir paragraf ve bir buton olsun. Butona her tıklandığında, paragrafın metninin sonuna bir ünlem işareti eklenmesini sağlayın. Bunu state kullanarak yapın.

State yerine şimdi ref kullanarak bir App bileşeni oluşturun. Butona basıldığında paragrafın metninin değişmeyeceğinden emin olun. Ayrıca paragrafın metnini konsola yazdırın, konsolu açın ve metnin aslında değiştiğinden emin olun.