React Hooks ve useRef Kullanımı

Merhaba. Bir önceki yazıda useContext kullanımı hakkında yazmıştım. Bu yazıda React Hooks ve useRef Kullanımı hakkında ufak bilgiler sunacağım.

React Refs Nedir Yenir Mi?

React kullanırken refs kullanmak durumunda kalabilirsiniz. Tabii Stackoverflow’da bununla ilgili cevapları direkt kopyalayan birisiyseniz ne iş yaptığını bilmeyebilirsiniz. React’ta refs, dom elemanına ya da react render metodu içerisinde oluşturulan ögelere erişmeye imkan tanıyan yapılardır.

Kısacası <div className="profile"></div> gibi bir elemente erişebilmenin yolunu bize açar. Ne zaman kullanmalıyız gibi bir soru hala kafanızda ise buraya alalım sizi.

React Hooks ve useRef Kullanımı

React Hooks ile gelen useRef kullanımı diğer hooks fonksiyonları gibi basit bir şekilde çalışır.

import React, { useRef } from 'react';

function App() {

  let kullaniciAdi = useRef()

  function kullaniciAdiGoster() {
    alert(kullaniciAdi.current.value)
  }

  return (
    <>
      <input type="text" ref={kullaniciAdi} />
      <button onClick={kullaniciAdiGoster}>Kullanıcı Adını Göster</button>
    </>
  );
}

export default App;

Kısacası anlayacağınız üzere refs ile dom elemanlarına erişmekte size kolaylık sağlıyor. Class componentlerde bunu yapmak için aşağıdaki gibi bir yöntem kullanıyoruz

class App extends Component {
  constructor(props) {
    super(props);
    this.kullaniciAdi = React.createRef();
  }

  kullaniciAdiGoster() {
    alert(this.kullaniciAdi.current.value)
  }

  render() {
    return (
        <input type="text" ref={this.kullaniciAdi} />
        <button onClick={this.kullaniciAdiGoster}>Kullanıcı Adını Göster</button>
    )
  }
}

Ancak fonksiyonel componentlerde useRef bir ilkti. Örnek bir kullanım için şöyle basit bir kod yazalım;

import React, { useRef, useState } from 'react';

function App() {

  let kullaniciAdi = useRef()
  const [kullanici, setKullanici] = useState()

  function kullaniciAdiGoster() {
    setKullanici(kullaniciAdi.current.value)
  }

  return (
    <>
      <p>Kullanıcı Adı: {kullanici}</p>
      <input type="text" ref={kullaniciAdi} />
      <button onClick={kullaniciAdiGoster}>Kullanıcı Adını Göster</button>
    </>
  );
}

export default App;

Ref için aşağıdakini yapıyor diyebiliriz;

<button>Buton 1</button>

<button>Buton 2</button>

ve JavaScript

document.addEventListener("click", (evt) => {
    console.log(evt.target.innerText)
})

Yukarıdaki sadece bir örnek tabii.

Bu arada useRef fonksiyon componentler için bir ilk dedim yine de böyle bir kullanım gerçekleştirebilirsiniz. Peki farkları neler?

createRef her render işleminde yeni bir ref döndürürken, useRef her render işleminde aynı ref’i döndürür. Böyle de kullanabiliyorsunuz ama useRef kullanmak varken class componentler için düşünülen createRef’i kullanmasanız da olur. Kullanmak zorunda değilsiniz.

import React, { useState } from 'react';

function App() {

  let kullaniciAdi = React.createRef()
  const [kullanici, setKullanici] = useState()

  function kullaniciAdiGoster() {
    setKullanici(kullaniciAdi.current.value)
  }

  return (
    <>
      <p>Kullanıcı Adı: {kullanici}</p>
      <input type="text" ref={kullaniciAdi} />
      <button onClick={kullaniciAdiGoster}>Kullanıcı Adını Göster</button>
    </>
  );
}

export default App;

Özetlersek

Fonksiyon componentlerde ref kullanmak için useRef hook’u kullanılmalıdır.

DOM elemanlarına ulaşmak ya da react render fonksiyonu ile oluşturulan elemanlara ulaşmak için refs kullanırız.

useRef ve createRef temelde aynı işi yapsa da useRef her render işleminde aynı ref’i döndürürken, createRef daima yeni bir ref döndürür.

Kaynaklar

Bu yazıda aşağıdaki kaynaklarda faydalandım

Step by Step Examples of React

Fullstack React: An Introduction to Hooks in React

Bu yazıda React Hooks ve useRef Kullanımı hakkında ufak bir bilgi vermeye çalıştım. Class componentler ve fonksiyon componentlerde nasıl kullanılacağını da görmüş olduk. Umarım bu yazı faydalı olmuştur.

Okuduğunuz için teşekkür ederim.