React.js Hooks | useState nedir?

useState, renderlar arasında veri tutmayı sağlar.

useState, renderlar arasında verimizi tutmayı sağlayan bir React Hookudur. Component fonksiyonumuz her renderda temizlenip tekrar compute edilmekte. Bundan dolayı değişkenlerimiz ve verilerimiz tekrar compute edilince initial değerlerine dönmekte. Bu sorunu çözmek için verilerimizi useState ile tutarız. Ayrıca bu Hook sayesinde verimiz her değiştiğinde sayfamız rerender olmakta, reaktivite sağlamakta.

useState kullanımı

useState bir fonksiyondur. Parametre olarak tutmak istediğiniz verinin başlangıç değerini alır, veya başlangıç değerini döndüren bir fonksiyon alabilir.

useState(0)

Eğer ki bir sayaç yapacaksak, parametre olarak 0 değerini verebiliriz, boş bırakırsak undefined değerini alır.

useState fonksiyonu bize iki nesneli bir array döndürür. Ilk nesne verimizin değerini veren bir değişken, ikinci nesne ise verimizi değiştirebileceğimiz bir fonksiyondur.

const [counter, setCounter] = useState(0)

Verimizi değiştirmek

useState bize array içinde ikinci nesne olarak verimizi değiştirebileceğimiz bir fonksiyon döndürmektedir. Bu fonksiyon bir adet parametre alır, o parametre ya yeni verimiz olabilir ya da bize son en güncel verimizi verip yeni veri bekleyen bir fonksiyon olabilir.

const [counter, setCounter] = useState(0)
setCounter(counter + 1)

Son en güncel veri?

useState’in verdiği ilk nesne bize güncel verimizi verir demiştim. Fakat bu veri bize render öncesindeki güncel veriyi verir. Render sırasında verimizi birden fazla kez değiştirmek istersek useState’in bize verdigi veri güncel olmayabilir. Fakat state'imizi güncellemek için kullandığımız fonksiyonun bize verdiği veri en güncel veridir.

const [counter, setCounter] = useState(0)

function incrementByTwo(){
  setCounter(counter + 1) // <-- 1
  setCounter(counter + 1) // <-- 1
}

const [counter, setCounter] = useState(0)

function incrementByTwo(){
  setCounter(count => count + 1) // <-- 1
  setCounter(count => count + 1) // <-- 2
}