Photo by Dan-Cristian Pădureț on Unsplash

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.

https://codesandbox.io/s/useeffect-solution-character-limit-hl4f1

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.

https://codesandbox.io/s/useeffect-solution-wait-delay-418fz?file=/src/index.js:86-396

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.
https://codesandbox.io/s/useeffect-solution-fetch-xbgpi?file=/src/index.js:0-2295

WindowSizeCalculator

useEffect callback içerisinde window ekran boyutlarındaki değişimlere register olarak tüm değişiklikleri state aktarabiliriz.

https://codesandbox.io/s/custom-hooks-solution-browser-dimensions-vhzdu?file=/src/index.js:521-1207

Source Kod

GitHub kodu

Referanslar

https://ui.dev/

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store