useState

useState ile state yönetimini öğrenirsin.

useState hook'u

useState bir bileşende değişebilen veriyi tutar. Buna state denir. State değiştiğinde bileşen yeniden render edilir ve ekrandaki görünüm güncellenir.

Sayaç projesinde useState'i görmüştün. Şimdi onu daha derinden inceleyeceğiz. Çağrı şöyledir: const [count, setCount] = useState(0). Burada count mevcut değer, setCount onu güncelleyen fonksiyon, 0 ise başlangıç değeridir.

İki değeri dizi olarak döndürdüğü için destructuring kullanırız. İlk değer okumak, ikincisi yazmak içindir. Doğrudan count = 5 yazmak state'i güncellemez; her zaman setter kullanılır.

State değişince yeniden render

Setter'ı çağırdığında React yeni değeri alır, bileşeni tekrar çalıştırır ve ekranı günceller. Bu yeniden render denen süreçtir. Eski değer kaybolur.

Örnek: setCount(count + 1) çağrısında count 3 ise, yeni değer 4 olur ve bileşen yeniden render edilir. Ekranda artık 4 görünür.

State her zaman setter ile güncellenir. Doğrudan atama yapma; yaparsan React değişikliği fark etmez ve ekran güncellenmez. Bu, yeni başlayanların en sık yaptığı hatadır.

Uygulama Metin state'i değiştir

Bir App bileşeni yaz. useState(true) ile bir on state'i tanımla. Ekranda {`{on ? 'Açık' : 'Kapalı'}`} yazan bir <Text> göster. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  const [on, setOn] = useState(true);
  return <Text>{on ? 'Açık' : 'Kapalı'}</Text>;
}
export default App;

Kendini test et

useState ne döndürür?
- Yalnızca bir sayı
- Bir dizi: [değer, setter]
- Yalnızca bir fonksiyon
- Bir nesne
Cevabı göster

Bir dizi: [değer, setter] — ilk öğe mevcut değer, ikincisi setter'dır.

useState çağrısını tamamla

import { useState } from 'react';
import { Text } from 'react-native';

function App() {
  const [count, setCount] = ____;
  return <Text>{count}</Text>;
}

Cevabı göster

import { useState } from 'react';
import { Text } from 'react-native';

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

useState parçalarını eşle

count

Mevcut değer
setCount

Setter fonksiyon
0

Başlangıç değeri
re-render

State değişince olur

Sıradaki ders: State güncelleme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler