useState çağrısı
- React kursu
- Başlangıç
- Ders 41/84
- 4 dk
useState'in değer ve güncelleyici döndürdüğünü öğrenirsin.
useState çağrısı
useState'i bileşenin en üstünde, koşulsuz çağırırsın. Döngü, koşul veya fonksiyon içinde çağırmak yasaktır; React çağrı sırasına göre hatırlar.
Birden fazla state'in varsa birden çok useState çağrısı yaparsın, her biri ayrı satırda. Sıra her render'da aynı kalmalıdır.
Bu ilkeye "hook ilkeleri" denir; ileride ayrıntılı göreceğiz.
Başlangıç değeri
useState'e verdiğin ilk argüman başlangıç değeridir. Sayı, metin, dizi, nesne veya null olabilir.
Başlangıç değeri yalnızca ilk render'da kullanılır. Sonraki render'larda React hatırlanan değeri döndürür; başlangıç değerini yeniden hesaplamaz.
Başlangıç değeri pahalı bir hesaplama ise fonksiyon biçiminde verebilirsin: useState(() => hesapla()). Buna ileride değineceğiz.
Uygulama İsim state'i
Aşağıdaki iskeleti tamamla. NameTag bileşeni yaz; useState'i içe aktar. const [name, setName] = useState("Ayşe"); tanımla ve <p>Merhaba {name}</p> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// NameTag bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function NameTag() {
const [name, setName] = useState("Ayşe");
return <p>Merhaba {name}</p>;
}
export default NameTag;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useState çağrısı: eksik parçayı tamamla
const [name, setName] = useState(____);const [name, setName] = useState("Ayşe");Açıklama: Başlangıç değeri bir metin.
2 useState'i aşağıdakilerden hangisinde çağırmak yasaktır?
Hooks must be called in the same order every render.- Bileşenin en üstünde
- Başka bir hook'tan önce
- Bileşen gövdesinde
- if bloğu içinde Doğru cevap
Açıklama: Koşul içinde çağırmak hook ilkelerini bozar.
3 useState çağrısı: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useState(0) |
Sayı başlangıç |
useState("") |
Boş metin |
useState([]) |
Boş dizi |
useState(null) |
Yok başlangıç |