State nedir?

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.

Örnek çözümü göster

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

export default Counter;

Kendini test et

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
- Tip hatası verir
Cevabı göster

Bileşen her render'da sıfırlar — Bileşen yeniden çizildiğinde yerel değişken baştan başlar; React değişikliği bilmez.

State nedir: eksik parçayı tamamla

const [count, ____] = useState(0);

Cevabı göster

const [count, setCount] = useState(0);

State nedir: kavramları eşleştir

count

Mevcut değer
setCount

Güncelleyici
useState

Hook
0

Başlangıç değeri

Sıradaki ders: useState çağrısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler