React Hooks Nedir ve Nasıl Kullanılır?

Yukardaki örnekte görebileceğimiz üzere ilk değeri 0 olan bir “count” state i tanımladık. Ardından bunu state imizi return kısmında gösteriyoruz. Bir buton yardımıyla setCount işlemiyle her butona basıldığında count state imizi 1 arttırıyoruz.

useEffect Nedir ve Nasıl Kullanılır?

useEffect Reactteki yaşam döngülerinin bir çoğunu barındıran bir hooktur. Mount, unmount ve update evrelerinin hepsinde çalışma kapasitesine sahiptir. Bu evreleri kullanmak için useEffectte belirli koşullar vardır. Bu evrelerin dışında state e bağlı bir çalışma yöntemi daha vardır. Bunlar için ayrı ayrı birer örnek verip inceleyelim.

Yukardaki örnekte useEffect hookunun unmount evresindeki yazım şeklini görüyoruz. Uyguluma unmount olduğunda yani sayfadan ayrılınca “count” state i 1’e setlenecek.

Yukarıdaki örnekte useEffect in update evresindeki yazım şeklini görüyoruz. Fakat ilk mount evresindede çalışacak bu metod. Tıpkı componentDidUpdate fonksiyonu gibi bir çalışma mantığı var. State güncellemesi olduğu anda console da “Count Increase 1” yazısını göreceğiz. Yani butona her tıklandığında console da bu yazı gözükecek.

Yukarıdaki son örneğimizde de useEffect in bir state e bağlı olarak update olma ve çalışma yazımını görüyoruz. “count” state i her güncellendiğinde useEffect hooku çalışacak ve console da “Count Increased” yazısını göreceğiz. useEffect i bağlı değişkenlerle tetiklemek için köşeli parantez içine istediğimiz değişkenleri yazabiliriz. Bu yazdığımız değişkenlerden herhangi biri değiştiğinde useEffect tetiklenecektir.

useRef Nedir ve Nasıl Kullanılır?

useRef hook u bir componentteki bir mutable değerin component tekrar render olmasını tetiklemeden bu değeri tutmamızı sağlar. Bu mutable değer değiştirildiğinde bellekte değişen değer olacak ama component tetiklenmediği için o değeri görüntüleyemeyeceğiz.

Örnekte görebileceğimiz gibi “count” değişkenimiz butona basıldığında 1 fazlasına setleniyor fakat görüntüleme kısmında 0 değeri hiç değişmeyecek. Sadece bellekteki değerini değiştirmiş olacağız.

useMemo Nedir ve Nasıl Kullanılır?

useMemo hookunu anlatmadan önce Memoization nedir onu açıklamak gerekir. Memoization işlemi aslında bizim yazdığımız kodla yaptığımız hesaptan çıkan sonuçları tutan ve değişmediği sürece hesaplamaları tekrar çalıştırmadan sonucumuzu bize tekrar döndürebilen yapıya denir. Bu sonuçların saklanması ucuz bir işlem değidir o yüzden sadece yüksek maliyetli işlevlerde kullanılması gerekir. useMemo hooku bu yapıyı kullanmamızı sağlayan bir hooktur ve iki parametre alır. İlki memoization yapmak istediğimiz işlem ikincisi ise bu işlemde kullanılan parametrelerdir.

Yukarıdaki örnek genelde kullanılabilecek bir yapı değil ama useMemo nun çalışma mantığını göstermek amacıyla yapıldı. Bir kullanıcı listemiz var ve input yardımıyla arama yapıyoruz ve listemizi güncelliyoruz. Buton yardımıylada arama inputuna yazdığımız kelimeyi tekrar aynı arama fonksiyonuna gönderiyoruz. Diyelim ki bir arama yaptık ve listemiz güncellendi. Fonksiyonumuzu useMemoya sardığımız için bu değer kayıt edilecek ve butona tekrar tıklanıp fonksiyon aynı parametreyle tekrar çağırılınca fonksiyon çalışmayacak önceki dönen sonucu bize tekrar gönderecektir.

useReducer Nedir ve Nasıl Kullanılır?

useReducer aslında useState in bir alternatifidir. Daha önce Redux kullandıysanız yapısına çok benzemektedir. Stateler birden fazla olduğunda ve karmaşıklaştığında daha çok tercih edilir. Fakat genel olarak React projelerinde Redux kullanıldığı için bu hook yerine useDispatch ve useSelector hooklarını kullanırız. Onlara da burada birer örnek vererek gösterelim.

Yukardaki örnekte bir initial state imiz ve içinde iki tane değişkenimiz var. Bunların set fonksiyonlarını da yazdık ve useReducer hookumuza bunları bağladık. Bu hooktan dönen state objesi initial stateteki değişkenleri çağırmamıza, dispatch fonksiyonu ise storedaki fonksiyonları kullanmamıza olanak sağlar.

Yukarıdaki örnekte useDispatch ve useSelector örneklerini görüyoruz. useDispatch ile redux kullandığımız yapıdaki actionımızı kullanabiliyoruz. useSelector ise reducerdaki statelere erişebilmemizi sağlıyor.

useCallback Nedir ve Nasıl Kullanılır?

useCallback useMemo hookunun yapısına çok benzemekle beraber döndürdüğü sonuç biraz daha farklıdır. useMemo aldığı fonksiyonun sonucunu saklar fakat useCallback bu fonksiyonun kendisini saklar ve parametreler değişmediği sürece sakladığı fonksiyonu döndürür.

Yukarıdaki örnek useMemo hookunda yaptığımız örneğe çok benzemekle birlikte tek farklılığı useCallback hookunu kullanmamız ve bunun sayesinde “filteredUsers” olarak useMemoda dönen değerin artık “filteredUserFunc” fonksiyonu olmasıdır. useCallbackle sardığımız fonksiyonumuz “search“ parametresi değişmediği sürece tekrar render olmayacak ve bize aynı listeyi dönmeye devam edecektir.

Custom Hook Oluşturma

Custom yani baştan sona bize ait olan bir hook oluşturma React in bize sağladığı esnekliklerden bir tanesidir. Kendimize ait örnek küçük bir hook oluşturalım.

Yukarıdaki örnekte çok basit bir custom hook oluşturduk. “personID” propunu alıp “PersonArr” listemizdeki kişileri arayıp gönderilen kişinin id sine göre o kişinin yaşını bize döndüren bir hook oluşturmuş olduk. Kullanımını içinde bir örnek yazalım.

Yukarıdaki örnektede yazdığımız “usePersonAge” hookumuza 1 id sini yolladık ve listedeki ilk kişinin yaşını bize döndürmüş oldu.

Sonuç

React’in çıkarmış olduğu yukarıda gösterilen örnek hooklardan çok daha fazla olmasına karşılık biz bir kaç tanesini incelemiş olduk. Hook yapısı functional componentlerin kullanımı yaygınlaştırmakla beraber yazım kolaylığı ve esnekliği sağlamakta. Özellikle Class componentlerin yaşam döngüsü metodlarında yaşanılan sıkıntılardan ötürü hookların daha temiz ve anlaşılır olması kod karmaşıklığını ve yazım kolaylığını bize sağlamış oluyor.