Özet - useState

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.

Örnek çözümü göster

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;

Kendini test et

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
- useState en üstte çağrılır
Cevabı göster

count++ state'i günceller — count++ doğrudan değişimdir; React görmez.
Özet - useState: kavramları eşleştir

useState

Hook
güncelleyici

Yeni değer
fonksiyon formu

Güvenli artırım
spread ...f

Nesne güncelleme

Sıradaki ders: Proje: Sayaç uygulaması

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler