REACT CUSTOM HOOKS
CustomHooks extends Timer & Interval Usage
Aşağıda usehooks.com adresinde bulunan bazı custom hook’ ların nasıl Timer ve Interval kullanımını daha basit hale getirdiğini demolar ile göstereceğim
eact Hook’larını React.dev sitesinden incelediğinizde bir sürü built-in react hook yer aldığını görebilirsiniz.
- State Hooks : useState, useReducer
- Context Hooks: useContext
- Ref Hooks: useRef, useImperativeHandle
- Effect Hooks: useEffect, useLayoutEffect, useInsertionEffect
- Performance Hooks: useMemo, useCallback, useTransition, useDefferedValue
- Resource Hooks: use
- Other Hooks: useId, useDebugValue, useSyncExternalStore
Bugün üzerinde duracağımız konu ise DOM üzerinde JS ile yaptığımız değişiklikleri nasıl CustomHook’ lar ile yazılabiliyor olduklarını inceleyeceğiz. Bu örneklere React Digital Garden üzerindeki knowledge map’ lerden erişebilirsiniz.
useInterval
useTimeout
Bu örnekte alta gözüken Hello World yazısı 3 saniye bekletildikten sonra gösterilir.
useDebounce
Bu özellik genelde ekranda bir alan (input) içerisine bir arama girdiğimizde bu aramanın her harf değişikliğinde çalışarak backend yorması yerine belli aralıklar bırakarak backend çağırmasında kullanılır.
Aşağıdaki örnekte bir input alanı bulunuyor. Bunun içerine kelimeyi yazdıkça bir anlık değerini bir de debounce edilmiş değerini görebilirsiniz.
useContinuesRetry
Bu örnek bir servise gidip belli bir değere ulaşamadığınızda ama arkasından belli aralıklar ile tekrar tekrar sorgulayıp veriyi almak istediğinizde kullanabileceğiniz bir hook örnek kullanımıdır.
useRandomInterval
Aşağıdaki örnekte bir interval ile veri üretmek istiyoruz ama bu interval’ında random oluşmasını istiyoruz. Oyunlarda , Parçacık sistemlerinde kullanabileceğiniz bir custom hook yapısıdır. Aşağıdaki örnekte random sayının sürekli değiştiğini ama değişim zamanlarının random aralıklarda olduğunu görebilirsiniz.
useIntervalWhen
Interval döngüsünün bir koşula bağlı olduğu örnektir. Bu koşul sadece kullandığımız hook api’sinin inputlarının koşula bağlanmasını sağlamıştır.
useCountDown
Bu örnekte ise basılan düğmeye göre 5, 10, 15 sn mevcut zamana ekleyerek bu zamandan aşağıya doğru sayılmasını sağlayan hook yapısıdır.
useThrottle
Bu örnek useDebounce çok benzeyen bir custom-hook, useDebounce Input’larda sıklıkla kullanılırken buda Scrolling işlemlerinde resimlerin lazy-loading (geç yüklenmesinde) network yormamak için kullanılan custom-hooklardan bir tanesidir.
useIdle
Bu örnekte kullanıcının hareketleri dinlenerek kullanıcının ekranda aktif bir hareket yapıp yapmadığı kontrol edilir ve ui bunun ilgili status basılır.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
