useState çağrısı

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.

Örnek çözümü göster

import { useState } from "react";

function NameTag() {
  const [name, setName] = useState("Ayşe");
  return <p>Merhaba {name}</p>;
}

export default NameTag;

Kendini test et

useState çağrısı: eksik parçayı tamamla

const [name, setName] = useState(____);

Cevabı göster

const [name, setName] = useState("Ayşe");

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

if bloğu içinde — Koşul içinde çağırmak hook ilkelerini bozar.
useState çağrısı: kavramları eşleştir

useState(0)

Sayı başlangıç
useState("")

Boş metin
useState([])

Boş dizi
useState(null)

Yok başlangıç

Sıradaki ders: State güncelleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler