State güncelleme
- React kursu
- Başlangıç
- Ders 42/84
- 4 dk
Setter ile state'i güncellemeyi ve eski değeri kullanmayı öğrenirsin.
State güncelleme
State'i güncellemek için güncelleyici fonksiyonu çağırırsın: setCount(count + 1). Bu, yeni değeri hesaplar ve React'e bildirir; React yeniden çizer.
Yeni değer eski değere bağlıysa fonksiyon formu daha güvenlidir: setCount(c => c + 1). Bu, arka arkaya yapılan güncellemelerde karışıklığı önler.
State'i doğrudan değiştirme: count++ yanlış. React değişikliği görmez; her zaman güncelleyiciyi kullan.
Yeniden çizim
Güncelleyici çağrılınca React yeni değeri zamanlar ve bileşeni yeniden çizer. Çizim hemen değil, bir sonraki "tick"te olabilir; bu yüzden arka arkaya çağrılar birikebilir.
Bu yüzden eski değere bağlı güncellemelerde fonksiyon formu setCount(c => c + 1) önerilir. Her çağrı en güncel değeri alır.
Yeniden çizim ucuzdur; React yalnızca değişen kısmı DOM'a yazar.
Uygulama Artırmalı sayaç
Aşağıdaki iskeleti tamamla. Step bileşeni yaz; useState'i içe aktar. const [n, setN] = useState(0); tanımla. handleUp fonksiyonu içinde setN(n => n + 1) çağır. <button onClick={handleUp}>{n}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Step bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function Step() {
const [n, setN] = useState(0);
function handleUp() { setN(n => n + 1); }
return <button onClick={handleUp}>{n}</button>;
}
export default Step;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisiyle count bir artar?
The updater function changes the state.- setCount(count + 1) Doğru cevap
- count = count + 1
- count++
- setCount = count + 1
Açıklama: setCount(count + 1) yeni değeri React'e bildirir.
2 State güncelleme: eksik parçayı tamamla
setCount(____)setCount(count + 1)Açıklama: Mevcut değere bir ekledin.
3 State güncelleme: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
setCount(c => c+1) |
Fonksiyon formu |
count++ |
Yanlış değişim |
setCount(0) |
Sıfırlama |
yeniden çizim |
Re-render |