React’te Custom Hook Oluşturmak

Hook’lar, React’in 16.8.0 sürümü ile hayatımıza girmiş, bir sınıfa bağlı olmadan Functional Component yazmamıza olanak sağlayan yapılardır.

React Component’i, ihtiyacı olan Lifecycle Method’lar ve State gibi yapıları “Component” sınıfından kalıtım yoluyla alır. Functional Component yazdığımızda bu yapılara ulaşamayız.

Bu sorunu Hook’lar yardımı ile çözeriz. “useEffect” ile Lifecycle Method’lara, “useState” ile de State yapısına ulaşmış oluruz. Bunun gibi daha birçok component özelliğine Hook’lar ile ulaşırız. Peki kendi Hook’umuzu nasıl oluştururuz?

Hook’lar aslında geri dönüş değeri olan, bildiğimiz JavaScript fonksiyonlarıdır. Dizi, değişken, obje, fonksiyon, hatta React Component’i bile geri döndürebiliriz. (Sonuçta React Component’leri de geriye Jsx döndüren fonksiyonlardır.)

Özetle içinde React Component’inin özelliklerini taşıyan bu fonksiyonlara Hook deriz.

Senaryo

Bir backend servisi ile iletişime geçmesi istenen uygulama düşünelim. Bu iletişimin tek bir fonksiyondan kontrol edilmesini istiyoruz. Bunun için de “isLoading”, “errorText” ve “data” gibi bazı değişkenlerin durumunu takip etmemiz gerekiyor. Bu takip için de Lifecycle Method’lara ve State’lere ihtiyacımız var. Yani fonksiyonumuz bir hook olmalı.

Küçük ama önemli bir not olarak: React’in dökümanında, hem React’in hata takibini daha iyi yapabilmesi, hem de kodumuzun daha okunabilir olması için hook’u isimlendirirken “use” ile başlatmamız tavsiye ediliyor. Biz de örnekte öyle yapalım ve koda geçelim.

Parametre olarak “fetchData” fonksiyonu alan Hook’umuzu oluşturduk.

“useFetchingData” hook’u dışarıdan parametre olarak “fetchData” fonksiyonunu alıyor ve “data”, “isLoading”, “error” state’lerini bir dizi olarak geriye dönüyor. Burada, bu değişkenleri neden bir objede değil de dizi içinde döndürdüğümü yazının sonunda açıklayacağım. Şimdilik Hook’umuzu kullanmaya geçelim.

Hook’umuzu sayfamızda kullandık.

“useFetchingData” Hook’umuza parametre olarak “getAllCountry” fonksiyonunu gönderdik. JavaScript’in Destructuring özelliği yardımı ile birlikte geri dönen dizimizden değişkenlerimize ulaştık. Böylece backend tarafına yapılan istekleri tek bir yerden yönetme becerisine erişmiş olduk.

Peki değişkenlere erişmek için neden array döndürme kararını verdim?

Bu soruyu useState Hook’u için merak ettim. Neden bir array geri döndürüyor? Neden bir obje değil. Sonuçta objeyle de Destructuring yapabiliriz. Bu sorunun bana göre çok tatmin edici ve basit bir cevabı var.

Dönen değişkenleri daha temiz bir şekilde isimlendirmek. :)

Hemen obje örneğimizi de görelim o zaman.

Değişkenlere Object Destructuring ile ulaştım.

Görüldüğü gibi Object Destructuring ile değişkenlere ulaştığımız zaman onları isimlendirmek kodun okunurluğunu düşürüyor. “useState’in” de array döndürmesinin sebebi olarak bunu gösterebiliriz.

Custom hook oluşturmak üzerinden aslında hook’ların ne işe yaradığını bildiğim kadarıyla anlatmaya çalıştım. Yeni yazılarda görüşmek üzere, zaman ayırıp okuduğunuz için teşekkür ederim.