useState
- React Native kursu
- Başlangıç
- Ders 71/116
- 5 dk
useState ile state yönetimini öğrenirsin.
useState hook'u
useState bir bileşende değişebilen veriyi tutar. Buna state denir. State değiştiğinde bileşen yeniden render edilir ve ekrandaki görünüm güncellenir.
Sayaç projesinde useState'i görmüştün. Şimdi onu daha derinden inceleyeceğiz. Çağrı şöyledir: const [count, setCount] = useState(0). Burada count mevcut değer, setCount onu güncelleyen fonksiyon, 0 ise başlangıç değeridir.
İki değeri dizi olarak döndürdüğü için destructuring kullanırız. İlk değer okumak, ikincisi yazmak içindir. Doğrudan count = 5 yazmak state'i güncellemez; her zaman setter kullanılır.
State değişince yeniden render
Setter'ı çağırdığında React yeni değeri alır, bileşeni tekrar çalıştırır ve ekranı günceller. Bu yeniden render denen süreçtir. Eski değer kaybolur.
Örnek: setCount(count + 1) çağrısında count 3 ise, yeni değer 4 olur ve bileşen yeniden render edilir. Ekranda artık 4 görünür.
State her zaman setter ile güncellenir. Doğrudan atama yapma; yaparsan React değişikliği fark etmez ve ekran güncellenmez. Bu, yeni başlayanların en sık yaptığı hatadır.
Uygulama Metin state'i değiştir
Bir App bileşeni yaz. useState(true) ile bir on state'i tanımla. Ekranda {`{on ? 'Açık' : 'Kapalı'}`} yazan bir <Text> göster. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { Text } from 'react-native';
// bileşeni buraya yazÖrnek çözüm
function App() {
const [on, setOn] = useState(true);
return <Text>{on ? 'Açık' : 'Kapalı'}</Text>;
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useState ne döndürür?
- Yalnızca bir sayı
- Bir dizi: [değer, setter] Doğru cevap
- Yalnızca bir fonksiyon
- Bir nesne
Açıklama: ilk öğe mevcut değer, ikincisi setter'dır.
2 useState çağrısını tamamla
import { useState } from 'react';
import { Text } from 'react-native';
function App() {
const [count, setCount] = ____;
return <Text>{count}</Text>;
}import { useState } from 'react';
import { Text } from 'react-native';
function App() {
const [count, setCount] = useState(0);
return <Text>{count}</Text>;
}Açıklama: useState(0) başlangıç değeri 0 olan state oluşturur.
3 useState parçalarını eşle
| Kavram | Anlamı |
|---|---|
count |
Mevcut değer |
setCount |
Setter fonksiyon |
0 |
Başlangıç değeri |
re-render |
State değişince olur |