State nedir?
- React kursu
- Başlangıç
- Ders 40/84
- 4 dk
State'in bileşenin içinde değişebilen veri olduğunu öğrenirsin.
State nedir?
Bileşenlerin state'i, zamanla değişen veridir. Bir sayaç, bir input'taki metin, açık/kapalı bir menü — hepsi state'tir.
Sıradan bir değişken işe yaramaz: bileşen her render'da onu sıfırlar. React'in değişiklikten haberdar olması için useState hook'unu kullanırsın.
useState, hatırlayan ve değişince yeniden çizen bir "kutu" verir. Bu kutuyu ileride derinlemesine göreceğiz.
useState kutusu
useState iki şey döndürür: mevcut değer ve onu güncelleyen fonksiyon. Bunu yıkım (destructuring) ile açarız.
Yazım: const [count, setCount] = useState(0). Burada count değer, setCount güncelleyici, 0 başlangıç değeridir.
Başlangıç değeri ilk render'da kullanılır; sonraki render'larda useState hatırlanan değeri verir.
Uygulama Sayaç iskeleti
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz; useState'i içe aktar. const [count, setCount] = useState(0); tanımla ve <p>{count}</p> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Counter bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return <p>{count}</p>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sıradan bir değişken (let) neden state için yetersizdir?
useState keeps the value across renders.- Sözdizimi yanlış
- Yavaş çalışır
- Bileşen her render'da sıfırlar Doğru cevap
- Tip hatası verir
Açıklama: Bileşen yeniden çizildiğinde yerel değişken baştan başlar; React değişikliği bilmez.
2 State nedir: eksik parçayı tamamla
const [count, ____] = useState(0);const [count, setCount] = useState(0);Açıklama: Güncelleyici adı setCount.
3 State nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
count |
Mevcut değer |
setCount |
Güncelleyici |
useState |
Hook |
0 |
Başlangıç değeri |