React Native
State güncelleme
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.
Örnek çözümü göster
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;
Kendini test et
-
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>
);
}
Cevabı göster
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>
);
}
-
Setter çağrısından sonra count?
- Hâlâ eski değer
- Hemen yeni değer
- Undefined olur
- Hata fırlatır
Cevabı göster
Undefined olur — React güncellemeyi zamanlar, senkron değişmez.
-
Güncelleme parçalarını eşle
- setCount
- Setter fonksiyon
- count + 1
- Yeni değer hesabı
- onPress
- Olay işleyici
- re-render
- Sonuç görüntü güncellemesi
Sıradaki ders: Önceki state
