React useRef Kullanımı

Selam arkadaşlar! Bu yazıda, React uygulamalarında useRef hook’un ne olduğunu ve nasıl kullanıldığını sizlere anlatacağım. Hazırsanız, başlıyoruz.

useRef Nedir?

React uygulamalarında, useRef hook’u DOM elementlerine erişim sağlamak ve statelerin önceki değerini saklamak için kullanılır. Özellikle, input alanlarının değerini almak veya önceki değerini saklamak gibi durumlar için oldukça kullanışlıdır.

1- Temel Kullanım (Referans)

Temel kullanımı bir örnek ile açıklamak daha iyi olacaktır.

Öncelikle basit bir component oluşturalım ve içerisine input ve button ekleyelim. Daha sonra useRef hook’unu React kütüphanesinden import edelim, ardından bu hook’u kullanarak bir inputRef referansı oluşturalım. Sonrasında elimizde bulunan inputa bunu bağlayalım. Şimdi elimizdeki buttona bir fonksiyon tanımlayıp bu fonksiyon içerisinde inputRef değişkeninin içerisindeki değeri console'a yazdıralım.

Burada dikkat edilmesi gereken konu, bazı durumlarda inputRef.current null gelebilir. Bunun nedeni, DOM elementinin henüz oluşmamış veya silinmiş olabileceğindendir. Bu yüzden önce bu değerin var mı diye kontrol ediyoruz, eğer null değilse console'a inputRef'in şu anki değerini yazdıralım.

Evet, gördüğünüz gibi componentimiz bu kadar. Test ettiğimizde, input alanına girdiğimiz değeri button yardımıyla console’da görebiliyoruz.

2- Önceki Değerleri Saklama

Bu kullanımı da bir örnek ile açıklayacak olursak, bir API isteğinden dönen değeri useRef ile önbellekleyerek, component render edildiğinde tekrar tekrar API isteği atmamasını sağlamak istiyoruz.

Önceden olduğu gibi useRef, useEffect ve useState hook’larını React kütüphanesinden import ettik ve sonrasında basit bir liste görünümü oluşturup elimizde ilk anda boş olan bir posts state'i oluşturduk. Component ilk render edildiğinde useEffect çalışacak ve eğer elimizde cacheData diye bir ref yoksa, API isteği atarak dönen sonucu cacheRef.current['cachedData'] = jsonPostData ile önbelleklemiş olduk. Daha sonrasında component içerisinde bir liste görünümünde kullanıcıya sunmak için elimizde bulunan posts state'ini set ettik. Bundan sonra eğer component tekrar render edilirse, önce önbelleğe alınmış veri var mı diye bakacak ve eğer varsa state'i o değerle set edecek. Eğer yoksa API isteği atılacak ve dönen değer önbelleğe alınacak.

Özetle, useRef hook’u ile bir önbellek nesnesi oluşturduk ve API verilerini bu önbellekte sakladık. API verileri önceki isteklerde önbellekte varsa, doğrudan kullanılır; aksi takdirde API’den verileri alıp önbelleğe ekleriz. Bu sayede istediğimiz şeyi başarmış olduk ve artık API isteğini tekrar tekrar atmamıza gerek kalmadan aynı verilere sahip olduk.

Kapanış

Evet, arkadaşlar. Uzun bir aranın ardından basit ama önemli bir konuyu sizler için ele almak istedim. Umarım bir yanlışım olmamıştır anlatımda veya konu içeriğinde. Bir yanlış bulursanız lütfen belirtmekten çekinmeyin. Sorularınız için de yorum atabilir veya bana tariqkaya24@gmail.com adresinden ulaşabilirsiniz.

Hepinize çok teşekkür ederim.

Bir sonraki yazıda görüşmek üzere…