Photo by Dan-Cristian Pădureț on Unsplash

REACT HOOK SERIES

React Hooks — useState Nedir ?

Bu konuya başlamadan önce serinin ilk iki yazısı olan React Hooks Nedir ? ve React Hooks Neden Çıktı ? yazılarını okumanızı öneririm..

React Hook bileşenler için ortak bir takım davranışların kanca atılarak sağlanması olduğunu anlatmıştım. Aynı aşağıdaki resimde olduğu gibi.

Fonksiyonel bileşenlerin Farklı Hook ‘lar ile Kanca atması…

Bileşenlerin en önemli gereksinimlerinden bir tanesi kendi internal state (iç durumlarını) bir yerde tutmak ve kullanmak şeklindedir. React Class Component yazarken zaten extends React.Component derken içerisinde state mekanizması hazır olan bir yapıdan bileşenimizi türetiyoruz Fakat Fonksiyonel Bileşen yaparken bunu useState Hook ile sağlayabiliyoruz.

Aşağıdaki resimdeki 2 kodda aynı işi yapıyor. Bileşen içerisinde yaş(age) değeri tutuyor ve bu düğmeye basıldıkça but değer arttırılıyor.

Class vs Hook Component

Functional Bileşende useState ile bunu nasıl yapıyoruz ? Gelin koda biraz daha yakından bakalım.

  • useState(0) : Bileşeni globaldeki state yönetmemizi sağlayan utility bağlayan araç. useState react kütüphanesi içerisinden geliyor. 0 ise tutacağımız state default değeri…
  • [age,setAge]: Burada tutulan değeri erişimi örneğin age üzerinden okuma(read) yapıyoruz . Ve setAge üzerinden yazma(write) yapıyoruz

Ve kullanacağınız her bir ayrı state bu şekilde alt alta bileşende tanımlamanız gerekiyor. Bu sayede bileşen render edilmesi aşamasında state persist ederek kullanabilme ve state değişiklik olduğunda ilgili bileşenin tekrardan render edilmesini sağlarsınız.

Bir kaç örnekle konuyu biraz daha detaylı anlatalım… Aşağıdaki örnekte Theme state tutmak ve buna göre arka planı Dark veya Light Mode göre render etmek istiyoruz Bu durumda tutmamız gereken state theme state

const [theme, setTheme] = React.useState('light')
https://codesandbox.io/s/usestate-hooks-example-j5del

Veya bir başka örneği incelersek basit bir ToDO app yapmak istiyoruz. Bu sefer bileşenimiz birden fazla değer tutma ihtiyacı var. Bu durumda bu değişkenlerimiz todos todo elemanlar listesi, o Anda Kullanıcının Input yazı yazdığı değeri tutan input ve her input todos eklenmeden önce bir id üretmemizi sağlayan yapı bu sayede remove işlemini bu id üzerinden yapabiliriz.

const [todos, setTodos] = React.useState([])
const [input, setInput] = React.useState('')
const [id, setId] = React.useState(0);
ToDoApp Kendime Göre Güncelledim

Veya Ekranda bir yazı listesi bulunuyor Ve bu listedeki elemanların birisinin detayını okumak istediğimizde bu openIndex tutmak istiyoruz..

https://codesandbox.io/s/usestate-solution-showhide-x3y12?file=/src/index.js:867-874

Bu ve benzeri bir çok örnek düşünebilirsiniz. Özetle state tutmak bileşenlerin en temel ihtiyacı olduğu için ve Bileşen Rendering etkilediği için React kütüphanesinden geliyor.

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