Merhaba Selahattin,
previousState, useState'de tuttuğumuz verinin fonksiyon sonucu eklenecek yeni veri ile değişmemesi ve hali hazırda tutulan veriye yeni verinin eklenmesi veya güncellenmesi için kullanılmaktadır.
const [count, setCount]= useState(0)
Bu bir sayaç olsun ve bu sayacı bir bir arttırmak istesem en basitinden yapacağım şey
setCount(count+1)
olur. State değerini o an neyse 1 arttır der fakat dökümantasyon şöyle kullanmayı öneriyor
setCount(prev => prev+1)
Buradaki prev state değişmeden önceki değeri söylüyor, onu bir arttır diyorsun.
Bunu önermelerindeki neden ise
const testFunc = () => {
setCount(count+1)
setCount(count +1)
}
Böyle bir fonksiyon içerisinde iki kere kullanıldığında state'i iki defa arttırmak istememize rağmen sadece bir defa arttırır.
Yani prev diye aldığımız veri, state'in o anki verisine sağlıklı yoldan erişmemizi sağlıyor.
Previous state mantığı şu:
useState yapısını obje ile açmaya çalıştığımızda -- [x, setX] = useState( {...} ); şeklinde kullanırız
Bu yapı içerisinde oluşturduğumuz object yapısını güncellemek istediğimizde içinde bulunan bilgiler örneğin
{ name: "Selahattin",
surname: "Demir",
gyScore: 35
}
olsun.
Bir butona bastığımızda buradaki soyad Demir yerine Gümüş olmasını istediğimizi varsayalım. Bu butonun onClick eventine
<button onClick = { () => {
setX({ surname:"Gümüş"})
}}></button>
yazmış olalım.
Burada setX() içerisinde süslü parantez açmamızın sebebi bir obje state açmamızdan ötürü. Burada setX() içersinde surname: "Gümüş" yazdığımızda ve bu butona tıkladığımızda ekranda bize yansıyacak görüntü sadece Gümüş olacaktır.
Çünkü biz setX içerisindeki objeye sadece soyad bilgisini verdik ve önceden oluşturduğumuz objenin içerisindekik bilgileri çekmeden güncellemesini sağladık. setX ile yeni gönderdiğimiz obje içerisinde sadece surname bilgisi bulunuyor. işte biz önceden oluşturduğumuz obje içindeki bilgileri çekebilmek ve bu çektiğimiz obje içindeki bilgileri güncellemek için previous state kullanıyoruz
Doğru kullanım:
<button onClick = { (prev) => {
setX({ ...prev, surname:"Gümüş"})
}}></button>
