Önceki state
- React Native kursu
- Başlangıç
- Ders 73/116
- 5 dk
Önceki state'ten yeni state türetmeyi öğrenirsin.
Fonksiyonel güncelleme
State'i mevcut değerden türetirken fonksiyonel güncelleme kullanırsın. Setter'a bir fonksiyon verilir: setCount(prev => prev + 1). Burada prev en güncel state değeridir.
Bu yöntem özellikle birden çok güncelleme arka arkaya yapılınca önemlidir. setCount(count + 1) iki kez çağrılırsa ikinci çağrı eski count'u kullanır; oysa setCount(prev => prev + 1) her zaman en son değeri alır.
prev yerine istediğin adı verebilirsin; yaygın kullanım prev ya da previous'tür. Önemli olan setter'a bir fonksiyon geçirmektir.
Ne zaman fonksiyonel update?
Bir olayda yalnızca bir kez güncelleme yapacaksan doğrudan atama setCount(count + 1) yeterlidir. Ancak tek olayda birden fazla güncelleme yapılıyorsa fonksiyonel update şarttır.
Örneğin bir butona basınca iki kez artırmak istiyorsan: setCount(prev => prev + 1); setCount(prev => prev + 1);. İlk çağrı yeni değeri hesaplar, ikinci çağrı onu baz alır.
Başka bir durum: setTimeout içinde state'i güncellersen closure eski değeri yakalar. Fonksiyonel update bu tuzağı da çözer. Bu yüzden emin değilsen fonksiyonel update tercih etmek güvenlidir.
Uygulama Çift artırma yaz
Bir App bileşeni yaz. useState(0) ile count tanımla. bump adında bir fonksiyon oluştur; içinde iki kez setCount(prev => prev + 1) çağrısı yapsın. Butona basınca bump çağrılsın ve sayaç ikiye çıksın. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
// çift artırmayı buraya yazÖrnek çözüm
function App() {
const [count, setCount] = useState(0);
const bump = () => {
setCount(prev => prev + 1);
setCount(prev => prev + 1);
};
return (
<TouchableOpacity onPress={bump}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Doğrudan ve fonksiyonel güncelleme
| Kavram | Anlamı |
|---|---|
setCount(count + 1) |
Eski count'u kullanır |
setCount(prev => prev + 1) |
En güncel değeri alır |
prev |
Son state değerini taşır |
iki kez artma |
Fonksiyonel güncelleme gerekir |
2 Hangisi fonksiyonel update?
- setCount(prev => prev + 1)
- setCount()
- count = count + 1
- setCount(count + 1) Doğru cevap
Açıklama: setter'a bir fonksiyon verilir ve prev en son değerdir.
3 Fonksiyonel güncellemeyi yaz
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const bump = () => {
setCount(____ => prev + 1);
};
}import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const bump = () => {
setCount(prev => prev + 1);
};
}Açıklama: prev en güncel state değerini taşır.