Article cover

13.06.2022

43

Like

804

Views

⚛️ React Hooks; useState nedir?

Yazının orijinalini sitemden okuyabilirsiniz : https://blog.turker.dev


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
}
React
JavaScript

Comments

You need to log in to be able to comment!

Serhat Türker

Location

Balıkesir, TR

Education

- KPAL

Bilgisayar Programcılığı - BANÜ

© 2021 Patika Dev

facebook
twitter
instagram
youtube
linkedin