State güncelleme
- React Native kursu
- Başlangıç
- Ders 72/116
- 5 dk
setState ile state güncellemeyi öğrenirsin.
setState ile güncelleme
State'i güncellemenin tek yolu setter fonksiyonudur. Sayaçtan hatırla: setCount(count + 1). Burada yeni değer, mevcut değer üzerine bir hesaplamadır.
Setter çağrıldıktan sonra state hemen değişmez. React güncellemeyi zamanlar; bir sonraki render'da yeni değer görülür. Bu yüzden setter çağrısından hemen sonra count'u okusan eski değeri alırsın.
Bir olay işleyicide setter çağırmak en yaygın desendir. Örneğin onPress={'{() => setCount(count + 1)}'}. Butona her basışta sayaç bir artar ve ekran güncellenir.
Setter async davranır
Setter çağrıldığında state senkron olarak değişmez. React güncellemeyi bir kuyruğa koyar. Bu yüzden setCount(count + 1); setCount(count + 1); yazarsan iki kez artmaz; çünkü ikinci satırdaki count hâlâ eski değerdir.
Bunu çözmek için fonksiyonel güncelleme kullanılır: setCount(prev => prev + 1). Burada prev her çağrıda en güncel değeri alır. Bunu bir sonraki derste ayrıntısıyla göreceğiz.
Bu davranış batch update olarak bilinir. React, birden çok setState çağrısını tek bir render'da birleştirir; performans için iyidir ama ardışık çağrılarda dikkat etmen gerekir.
Uygulama Sayaç butonu yaz
Bir App bileşeni yaz. useState(0) ile count state'i tanımla. Bir <TouchableOpacity> içinde <Text>{`{count}`}</Text> göster. onPress ile setCount(count + 1) çağır. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
// sayaç butonunu buraya yazÖrnek çözüm
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<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 Artırma çağrısı
import { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => ____(count + 1)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}import { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}Açıklama: setCount yeni değeri alır ve state'i günceller.
2 Setter çağrısından sonra count?
- Hâlâ eski değer
- Hemen yeni değer
- Undefined olur Doğru cevap
- Hata fırlatır
Açıklama: React güncellemeyi zamanlar, senkron değişmez.
3 Güncelleme parçalarını eşle
| Kavram | Anlamı |
|---|---|
setCount |
Setter fonksiyon |
count + 1 |
Yeni değer hesabı |
onPress |
Olay işleyici |
re-render |
Sonuç görüntü güncellemesi |