REACT HOOK SERIES
React Hooks — useEffect Örnek Analiz
Hook konusunda seriye devam ediyoruz. Geçtiğimiz yazıda useEffect ne olduğundan bahsetmiştik. Bu yazıda örnekler üzerinden analize devam edeceğim.
Aşağıdaki örnekleri ui.dev sitesinin CodeSandbox örneklerinden aldım..
Karakter Limitleme
Örneğin aşağıdaki örnekte karakter limitleme kısmında kullanıcıya bilgilendirme olarak ne kadar karakter kaldığı document.title yazılmıştır.
Wait (Belli Bir Süre Beklettikten sonra Gösterme)
Artık fonksiyon yaptığımız için yukarıdaki örnekte verdiğimiz textarea … vb ui bileşenlerini fonksiyonunuza parametrik geçebilirsiniz. Bu sayede örneğin aşağıdaki örnekte bir bileşenin render edilmesini istediğiniz bir süre kadar geciktirerek ekranda göstermek istersek. Bunu aşağıdaki kodla show state yapısını useEffect ile yöneterek basitçe gerçekleştirebilirsiniz.
Fetching
Post sunucudan çeken, her düğmeye bastığımızda bir sonraki postu çeken useEffect mekanizması, burda ekranın farklı state gösterilebilmesi için
- setLoading, setError, setPost useEffect içerisinde UI State yönetildiğini görebilirsiniz.
WindowSizeCalculator
useEffect callback içerisinde window ekran boyutlarındaki değişimlere register olarak tüm değişiklikleri state aktarabiliriz.
Source Kod
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
