React Hooks Nedir?
React Hooks, React’ın en kullanışlı özelliklerinden biridir. Hooks, hazırda yer alan state ve lifecycle gibi React özelliklerine erişmemizi sağlayan tekrar kullanılabilir javascript fonksiyonlarıdır. Kod karmaşıklığından bizi kurtarır. React fonksiyonlarının içinde kullanılır. İhtiyacımız olan işlemler hali hazırda hook fonksiyonlarda varsa bizim için kurtarıcıdır.
Hazırda olan React Hook’ları aşağıda listelenmiştir:
Başlıca React Hook’ları:
- useState
- useEffect
- useContext
Ek olarak hooklar:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
- useId
React Hooks Nasıl Kullanılır?
React’tan Hooks import edilir.
Hooks kullanılırken dikkat edilmesi gereken kurallar vardır:
- Hooks, yalnızca React fonksiyon bileşenlerinin içinde kullanılır. Vanilla javascript fonksiyonlarının içinde çağrılamaz.
- Hooks, React fonksiyonlarının top-level kısmında çağrılır.
- Hooks, koşul ifadelerinde, alt ve iç içe fonksiyonlarının içinde çağrılamaz.
useState Nedir? Nasıl Kullanılır?
useState bir state hookudur. Herhangi değişkenleri saklayıp react bileşen fonksiyonlarında erişmeye, şartlı olarak kullanmaya, güncellemeyi sağlar.
import { useState } from “react”; kullanılarak import edilir.
const [state, setState] = useState(); şeklinde kullanılır. useState içine eklenen parametre değeri state’in başlangıç değeridir. “state” ile değere erişilir. setState() fonksiyonu ile state güncellenir.
useEffect Nedir? Nasıl Kullanılır?
useEffect Hook’u ile component mount edildiğinde hangi fonksiyonun çalıştırılacağına karar verilir. Anonim fonksiyon ve dependency parametrelerini alır.
import { useEffect } from “react”; kullanılarak import edilir.
Aşağıdaki örnekte ilk render işleminden sonra “hello tio” yazısı console ekranında gösterilmiştir.
Custom Hooks Nedir? Nasıl Kullanılır?
React, bileşenlerde aynı mantıktaki farklı gereksinimlerimize göre özelleştirmek istediğimiz Hook’umuzu yazmamız için kolaylık sağlar. React’ın custom Hook’umuzun hook olduğunu anlayabilmesi için fonksiyonu use ile başlayarak yazmalıyız. Örnek olarak useLocalStorage, useInput gibi. React, kendi Hook’larını custom hooks içinde kullanmamıza olanak tanır. İsteğimize bağlı olarak custom hooks parametre alabilir ve hangi değerleri döndürmek istediğimizi belirleyebiliriz. custom hook sayesinde yeniden kullanılabilir fonksiyonlar üretebilir, kod tekrarından kaçınabiliriz.
useCurrentLocation Örneği
Örnek olarak siteye ilk giriş yaptığımızda konum bilgilerimizi aldığımız useCurrentLocation adında bir custom hook yazalım.
useState Hook’unu kullanarak konumumuzu sonradan güncellenmek üzere location state’inde saklayalım. location başlangıç değeri boş olsun.
Konum için Geolocation API’den yararlanacağız. Site sadece ilk render edildiğinde eğer tarayıcı geolocation’ı desteklemiyorsa false döneceği fonksiyonu yazalım. İlk render işleminde yapmak istediğimiz işlem için useEffect Hook’undan yararlanacağız.
Eğer destekliyorsa geolocation’un getCurrentPosition metodunu çağıralım. Eğer metod başarılı ise koordinasyonun eylem ve boylamını elde edeceğimiz objeyi çağırmak için success handler fonksiyonu oluşturup bu fonksiyonu metoda parametre olarak gönderelim. Yani metoddan dönen position objesi oluşturduğumuz fonksiyonu callback olarak kullandığımızda istediğimiz gibi kullanabileceğiz.
handleSuccess fonksiyonunda location state’ini koordinat objesiyle set edelim.
Son olarak location sonucunu döndürelim.
App.js React fonksiyonunda hook’u çağırarak sonucu ekranda görüntüleyebiliriz:
Sonuç olarak,
React hooks, state ve lifecycles özelliklerinden yararlanmayı sağlayan çeşitli durumlar için yer alan sıradan javascript fonksiyonlarıdır. Daha az satırda kod yazmayı sağlar.
Custom hooks ile React’ta yer almayan ihtiyaç anında gereken özelleştirilmiş hook’lar yazılabilir. Custom Hooks yazılırken React hook’larından yararlanılabilir. “use” ile başlayarak hook’lar adlandırılmalıdır.
