useRef Nedir?

React’te useRef hook'u render işlemi için gerekli olmayan bir değeri saklamak, bileşenler arasında tutarlı kalmasını sağlamak ve DOM elemanlarına doğrudan erişmek için kullanılır. Bu hook bir değeri referans almanın yanı sıra, bileşenin yeniden render edilmesini tetiklemeden değişiklik yapmanıza olanak tanır.

Counter üzerinden bir örnek yapalım.

Bu örnekte count değişkeni useState hook'u ile bir state olarak tanımlanmıştır. setCount fonksiyonu ile count her güncellendiğinde bileşen yeniden render edilir. Bu React'ın state yönetimi mantığının bir parçasıdır. State değiştiğinde ilgili bileşen güncellenir ve yeniden render edilir.

Şimdi örneğimize bir buton daha ve onun için de bir fonksiyon daha ekleyelim.

Bu örnekte Tıkla butonuna 10 kere basıldığı zaman 11. basımda alert çıkar. Fakat Sayaç butonuna 10. basıma gelmeden ya da alert mesajını aldıktan sonra basarsak Tıkla butonundaki sayma işlemi yeniden 0'dan başlar çünkü artık count değişkeni güncellenmiştir. Count güncellendiği için de App componenti yeniden render edilir ve içindeki her şey de dolayısıyla render edilmiş olur.

Console üzerinden bir kontrol yapalım.

Burada count değişkenini yazdırmak için yanına +1 eklememin ama diğer otherCount yazdırmak için yanına +1 eklemememin sebebi; count değişkeni React'in state yönetimi sistemine bağlı, otherCount değişkeninin ise normal bir değişken olup React'in state yönetiminden bağımsız olmasıdır.

setCount fonksiyonu çağrıldığında React state'i günceller ve bileşeni yeniden render eder. Ancak bu güncelleme asenkron olarak çalışır.

Bu nedenle setCount(count + 1) ifadesinden hemen sonra console.log(count) çalıştırıldığında count'un önceki değeri gösterilir. Çünkü state henüz güncellenmemiştir.

Sonuç olarak console.log("Count butonuna " + count + " kez basıldı.") ifadesi bir adım geriden gelir ve doğru değeri elde etmek için count + 1 yazmamız gerekti.

otherCount değişkeninde ise otherCount++ ile değer doğrudan artırılır ve hemen güncellenir. Bu nedenle console.log doğru değeri gösterir.

Console çıktısında da görüldüğü gibi Tıkla butonu count değişkeni ne zaman güncellenirse o zaman yeniden saymaya başlıyor.

Ancak Tıkla butonunun şu anda arayüzü yeniden render etmesine gerek yok çünkü bu durum uygulamanın diğer işlevlerini etkilemiyor. Bizim amacımız ise Tıkla butonunun render edilmesini engellerken aynı zamanda count state'inin güncellenmesini sağlamak.

Tam bu noktada useRef hook’unu kullanmamız gerekiyor.

Console’daki çıktımız ise bu şekilde;

otherCount değişkenini bastırdığımızda bize verdiği current değerini alıyoruz. initialValue ref nesnesinin current özelliğine başlangıçta atanacak değeri belirtir. Herhangi bir veri türünde olabilir ve yalnızca ilk render işleminde dikkate alınır.

useRef, current özelliğine sahip bir nesne döndürür. Başlangıçta verdiğiniz initialValue değeri atanır ancak sonrasında farklı bir değere değiştirilebilir. Eğer ref bir JSX elemanına atanırsa React current özelliğini otomatik olarak yönetir. Sonraki render işlemlerinde aynı nesne döndürülür.

Dikkat Edilmesi Gerekenler

• ref.current değiştirilebilir ancak render için kullanılan bir nesneyi (örneğin state) değiştirmemelisiniz.
• ref.current değiştirildiğinde React bileşeni yeniden render etmez çünkü ref React dışı bir JavaScript nesnesidir.
• Render işlemi sırasında ref.current'e yazmak veya okumak bileşenin davranışını öngörülemez hale getirebilir. Yalnızca başlangıçta yapılmalıdır.

Kodumuzu bu şekilde güncelleyerek tekrardan çalıştırıyoruz. Burada useRef ile otherCount.current yönetiliyor ancak ref.current'i render sırasında değil butona tıklanırken güncelliyoruz yani kullanıcı etkileşimi (tıklama) sırasında değiştiriliyor.

Artık otherCount değişkeni useRef ile tanımlandığı için bileşen yeniden render edilse bile otherCount.current değeri korunur ve kaldığı yerden devam eder. Bu sayede count state'i her güncellendiğinde bile Tıkla butonu etkilenmez ve sayma işlemi sıfırlanmaz.

Get Gaye Dinç’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

useState ve useRef hook'ları React'te değerleri hafızada tutmak için kullanılır ancak farklı amaçlara hizmet ederler.

useState

• React bileşeninin state’ini yönetmek için kullanılır.
• State değeri değiştiğinde bileşen yeniden render edilir.
• UI’nin güncellenmesi gerektiği durumlarda tercih edilir.
• Asenkron çalışır ve değer her güncellenmesinde bileşeni yeniden render eder.

useRef

• Bir bileşende değişkeni saklamak için kullanılır ancak render işlemini tetiklemez.
• State’ten bağımsız olarak değer saklar.
• UI’nin tekrar render edilmesi gerekmediği sadece veri saklanması gerektiği durumlar için uygundur.
• Her render’da aynı referansa sahip olur ve render işlemi sırasında değeri kaybetmez.

Özetle useState kullanıcı arayüzüne etki eden veriler için kullanılır. useRef ise UI'yi etkilemeden değer saklamak için kullanılır.

useRef ile Bir Input’a Referans Vererek Değeri Nasıl Alınır?

• useRef(null)ile başlangıçta referansın null olmasını sağlıyoruz.
• ref={inputRef} ile input elemanına useRef ile oluşturduğumuz referansı bağlıyoruz.
• inputRef.current.valueise inputRef.current DOM elemanına erişmemizi sağlıyor ve .value ile de input'un değerine ulaşabiliyoruz.
• handleClick fonksiyonu çalıştığında inputRef.current.value ile input elemanının o anki değerine erişebiliriz.

useRef’in Avantajları

Performans: useRef DOM manipülasyonları veya geçici veriler için daha performanslı bir yöntem sunar çünkü değer değiştiğinde bileşeni yeniden render etmez.

Karmaşık Durumlar: Özellikle animasyonlar veya dış kütüphanelerle entegrasyon gibi senaryolarda useRef kullanmak faydalıdır.

Özetle

useRef React'te DOM elemanlarına erişim ve değerlerin yönetimi için önemli bir araçtır. Render'a sebep olmadan veri tutmayı ve doğrudan DOM manipülasyonu yapmayı sağlar bu da uygulamanızın performansını artırır ve kodunuzu daha verimli hale getirir.

Bu yazımın sizler için faydalı olduğunu umuyorum. Eğer sorularınız veya katkılarınız varsa yorumlarda benimle paylaşabilirsiniz. Bir sonraki yazımda görüşmek üzere!

Sevgiler.