Özet - useState
- React kursu
- Başlangıç
- Ders 44/84
- 5 dk
Açılır-kapanır bir panel (accordion) bileşeni yazarak state pratiği yaparsın.
Özet - useState
Bu grupta state'i öğrendin. useState bir değer ve bir güncelleyici döndürür; değer render'lar arasında hatırlanır.
State'i doğrudan değiştirmezsin; her zaman güncelleyiciyi çağırırsın. Eski değere bağlı güncellemelerde fonksiyon formu setN(n => n + 1) güvenlidir.
Birden çok state ayrı useState'lerle tutulur; ilişkili değerler tek nesnede toplanıp spread ile güncellenir.
Uygulama useState özet görevi
Aşağıdaki iskeleti tamamla. Mood bileşeni yaz; useState'i içe aktar. const [happy, setHappy] = useState(true); tanımla. toggle fonksiyonu içinde setHappy(h => !h) çağır. <button onClick={toggle}>{happy ? "Mutlu" : "Üzgün"}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Mood bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function Mood() {
const [happy, setHappy] = useState(true);
function toggle() { setHappy(h => !h); }
return <button onClick={toggle}>{happy ? "Mutlu" : "Üzgün"}</button>;
}
export default Mood;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
Direct mutation does not update state.- useState(0) başlangıç değeridir
- setCount(count + 1) günceller
- count++ state'i günceller Doğru cevap
- useState en üstte çağrılır
Açıklama: count++ doğrudan değişimdir; React görmez.
2 Özet - useState: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useState |
Hook |
güncelleyici |
Yeni değer |
fonksiyon formu |
Güvenli artırım |
spread ...f |
Nesne güncelleme |