Custom React Hooks Nasil Yaratilir?

Erdem Uslu
Nov 6 · 3 min read

Eger React ile olusturulmus bir proje uzerinde calisiyorsaniz, React Hooks gelistirmesinin nimetlerinden faydalanmak, bazi seyleri cok daha fazla kolaylastirabilir. Henuz kullanmayi tercih etmiyor olsaniz bile, React ekosisteminde gittikce populerliginin arttigini ve kullaniminin standartlasmaya basladigini gorebilirsiniz. Hooks’a dair herhangi bir fikriniz yoksa ya da on bilgi edinmek istiyorsaniz, daha once paylastigim yazilara(useEffect Kullanimi Uzerine, React Hooks ile Animasyon, React Hooks ve Context.Provider ile State Yonetimi) bakabilir ya da dokumantasyonunu inceleyebilirsiniz.

Bu yazida tekrardan kullanilabilir(re-usable), kendi ihtiyaclarimiza gore ozellestirilmis bir hooks fonksiyonu olusturma uzerine bir seyler anlatmaya calisacagim. Onceki yazilarda degindigimiz sebepleri tekrardan hatirlatmakta fayda var: Temiz, anlasilir ve performansa donuk kod yazimi icin hooks gelistirmesinin sundugu avantajlar oldukca onemli.

Hazirlik

React hakkinda yazdiklarimi bir konu altinda basliklandirip, kodlari o konu basliklarina gore branch’e bolup github uzerinde paylasiyorum. Bu repo’da React app’i ayaga kaldirirken parcel kullanmistik. Async-await kullanimi icin babel, custom hooks yazarken herhangi bir kuraldan kacmamak icin de eslint konfigurasyonu uzerinde cesitli duzenlemeler yapmamiz gerekti. Eger master’i cekip yapilan ornegi sifirdan tekrar etmek isterseniz, “@babel/transform-runtime” paketini yukleyip .babelrc’de tanimlamak, Linter’in daha detayli olmasi icinse “eslint-plugin-react-hooks” paketinin kurulumunun yapilmasi gerekiyor. Bu degisikliklerin yapilmis halini, features/custom-hooks branch’i altinda bulabilirsiniz.

Not: Bir sure once su yazida, anlatimina daha cok agirlik verebilecegim konulardan bazilarini secmenizi istemistim. Genelde async, saga ve olusturdugumuz web uygulamasini sunucuda barindirma konulari agirlikli olarak secilmis duruyor. Async kismina bu yaziyla giris yapmis sayilabiliriz, diger konularda da mumkun olan en kisa zamanda bir seyler yazmaya calisacagim.

Konsept

Bu yazida olusturmayi hedefledigimiz “custom hooks”, github api’dan user bilgilerini cekmeyi hedefleyecek. Temelde, “username” parametresi alarak result, error ve loading state’lerini return eden bir hooks olacak. Boylelikle, tek bir noktadan, “re-usable” olarak yarattigimiz fonksiyonla birden fazla durumu kontrol edebilecegiz. Bunu bir nevi “request helper” olarak dusunebilirsiniz. React ile olusturdugunuz uygulamanin bircok yerinde benzer istekler uzerinden bir yasam dongusu kurguluyorsaniz, kendinize bu sekilde bir hooks olusturmak epeyce faydali olacaktir.


Yandaki gorunum olusturdugumuz projenin klasor yapisi. components altinda UserDetails adinda api’dan donen veriyi kendi icerisinde isleyip ekrana yansitan component bulunmaktadir. hooks klasoru altinda ise, useGithub adinda github’a gonderecegimiz her bir istegi calistiran ve bize gerekli verileri donen fonksiyon bulunmaktadir.

Yukaridan asagiya dogru ilerleyelim:

https://gist.github.com/erdemuslu/ebec14bd4e2d1ce8480b554dc2636556 — App.jsx

Yukaridaki kod yigini App.jsx’i olusturuyor. Input, Button ve UserDetails component’indan olusuyor. Input’a ref degeri atayarak value’sini cekmeyi hedefledik. Boylelikle butona basildiginda input’un value’sini alip yukarida useState ile olusturdugumuz username degerine atayabiliyor olacagiz. UserDetails component’inin render edilip edilmeme kararini da username degiskeninin olusup olusmadigina baglamis bulunduk.

https://gist.github.com/erdemuslu/7474ffcfd7b4f5ec988950dd54760929 — UserDetails.jsx

UserDetails component’inin useGithub hooks’unu cagirdigini ve kullandigini goruyoruz. Isin asli useGithub icerisinde yapiliyor zaten. Burada yaptigimiz, useGithub hooks’una username’i gondermek ve donen 3 adet veriye gore component’in ne render edecegine karar vermek.

Eger “loading” varsa, basit bir “loading” yazisi cikartiyoruz. “Error” durumunda ise mesaji ile birlikte kullaniciya bir seylerin ters gittigini belirtiyoruz. Eger iki duruma takilmadan gecebiliyorsa, component’in veriyi islemesine izin veriyoruz.

https://gist.github.com/erdemuslu/5ae77a1f0944bf25bc72f866b50fe473 — useGithub.jsx

useGithub adli “custom hooks”u olustururken iki fonksiyona ihtiyacimiz var. useEffect ve useState. useEffect ile github api’na gonderecegimiz “request”in username parametresinin degiskenligine gore calismasini sagliyoruz. Kendisine verdigimiz ikinci parametreye array icersinde username yazarak bunu belirtiyoruz. useState ile islemler bittiginde donecegimiz “state”leri tutuyoruz. Fonksiyon, useEffect icerisinde “request”i async olarak calistiriyor. Donen veriyi “error” verme durumuna gore isliyoruz ve sonucunda da state’leri return ediyoruz. Request baslamadan once ve sonra da isLoading state’ini degistirerek, bu gecise gore UserDetails’da gerekli islemleri yapmamizi saglayacak bilgiyi yakaliyoruz.

Sonuc

Hooks’un bu sekilde bir kullanimiyla uygulama icerisinde kullandigimiz “request”leri rahatlikla bu sekilde yonetebiliriz. Boylelikle gorece daha temiz ve takip edilebilir kod yiginlarinin ortaya cikacagini soyleyebiliriz.

Umarim faydali bir yazi olmustur. Tesekkurler.

Kaynak:

1- https://reactjs.org/docs/hooks-custom.html

2- https://medium.com/prototyped/building-custom-react-hooks-f6aad8567825

3- https://blog.bitsrc.io/writing-your-own-custom-hooks-4fbcf77e112e

4- https://dev.to/patrixr/react-writing-a-custom-api-hook-l16

Erdem Uslu

Written by

Frontend Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade