useRef ne zaman ve nasıl kullanılır?

React’a yeni başlayanların anlamakta zorlandığı hook’lardan birisi olan useRef’i bu yazıda örneklerle ele alalım.

useRef Nedir ?

useRef bir component içerisinde component’in tekrar render olmasını tetiklemeden “mutable” değişken tutmamızı sağlayan yapıdır.

function RefExample () {
  const count = useRef(0)
  return (
    <button onClick={() => (count.current += 1)}>
      Clicks: {count.current}
    </button>
  )
}

Yukarıdaki örneği useState ile gerçekleştirmiş olsaydık butona bir kez tıkladıktan sonra component tekrar render olacağından ekranda “Clicks: 1” gözükecekti. Değişkeni useRef ile tuttuğumuz için ilk değer olan “Clicks: 0” gözükecek ama bellekte “count” değeri 1 olacaktır.

Peki ref yerine component’in dışında normal bir değişken tutsaydık ne olurdu?

let count = {current:0}
function RefExample() {
//const count = useRef(0)

Örneğin RefExample’ı 3 defa bir sayfada çağırsaydık ve ekrandakı üç butondan birincisine tıklamış olsaydık bu üç component birbirinden izole çalışmayacağı için diğer component’ler de “current: 1” değerine sahip olacaktır.

useRef ile useState arasındaki fark nedir ?

Bir değişken değiştiğinde useState component’in tekrar render olmasını tetikler useRef component’in tekrar render olmasını tetiklemez.

useRef hook’u ile;

• DOM node’larına veya React elementlerine erişebiliriz.
• Mutable değişkenler tutabiliriz.
• Vanilla Javascript ile yazılmış kütüphaneleri React’a uyarlarken faydalanabiliriz.

useRef hook’u kullanırken bunları dikkat etmeliyiz;

• useRef ile oluşturulan bir ref sadece component oluştuğunda (onMount) oluşturulur ve tüm lifecycle’ı boyunca korunur.
• Bir ref’i güncellemek “side effect” oluşturacağı için sadece useEffect, useLayoutEffect veya bir event handler içerisinde güncellenmelidir.

Ref ile mutable değişken tutmak

Ref ile bir coin fiyatınının değişimini gösterelim.

“setPrice” iki saniye sonra tekrar çağrıldığında render tetiklendi ve böylece bir önceki fiyat bilgisi ekrana yansımış oldu. Ardından useEffect price bilgisini değiştirdi ve “prevPriceRef” i güncelledi.
ref yerine useState kullansaydık component’in tekrar render olurdu ve bundan dolayı bir önceki fiyat bilgisini kaybederdik.

Projenizde bu yapıya sık sık ihtiyaç duyabilirsiniz. Bir önceki prop veya state değerine kolayca erişmek için usePrevious custom hook’unu projenizde kullanabilirsiniz.

Ref ile DOM Elemanlarına erişmek

Bir ref oluşturup ekrandaki videoyu kontrol edelim. Bunu yapmak için önce useRef ile bir ref tanımlıyoruz ve bunu video elementine “pass” ediyoruz.
Artık ref’in içerisindeki current property’siyle dom elemanının play fonksiyonuna erişebiliriz.

Ayrıca callback ref’e de göz atmayı unutmayın.

Kaynaklar
https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
https://www.giovannibenussi.com/blog/a-complete-guide-to-useref/