Önceki state

Önceki state'ten yeni state türetmeyi öğrenirsin.

Fonksiyonel güncelleme

State'i mevcut değerden türetirken fonksiyonel güncelleme kullanırsın. Setter'a bir fonksiyon verilir: setCount(prev => prev + 1). Burada prev en güncel state değeridir.

Bu yöntem özellikle birden çok güncelleme arka arkaya yapılınca önemlidir. setCount(count + 1) iki kez çağrılırsa ikinci çağrı eski count'u kullanır; oysa setCount(prev => prev + 1) her zaman en son değeri alır.

prev yerine istediğin adı verebilirsin; yaygın kullanım prev ya da previous'tür. Önemli olan setter'a bir fonksiyon geçirmektir.

Ne zaman fonksiyonel update?

Bir olayda yalnızca bir kez güncelleme yapacaksan doğrudan atama setCount(count + 1) yeterlidir. Ancak tek olayda birden fazla güncelleme yapılıyorsa fonksiyonel update şarttır.

Örneğin bir butona basınca iki kez artırmak istiyorsan: setCount(prev => prev + 1); setCount(prev => prev + 1);. İlk çağrı yeni değeri hesaplar, ikinci çağrı onu baz alır.

Başka bir durum: setTimeout içinde state'i güncellersen closure eski değeri yakalar. Fonksiyonel update bu tuzağı da çözer. Bu yüzden emin değilsen fonksiyonel update tercih etmek güvenlidir.

Uygulama Çift artırma yaz

Bir App bileşeni yaz. useState(0) ile count tanımla. bump adında bir fonksiyon oluştur; içinde iki kez setCount(prev => prev + 1) çağrısı yapsın. Butona basınca bump çağrılsın ve sayaç ikiye çıksın. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  const [count, setCount] = useState(0);
  const bump = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };
  return (
    <TouchableOpacity onPress={bump}>
      <Text>{count}</Text>
    </TouchableOpacity>
  );
}
export default App;

Kendini test et

Doğrudan ve fonksiyonel güncelleme

setCount(count + 1)

Eski count'u kullanır
setCount(prev => prev + 1)

En güncel değeri alır
prev

Son state değerini taşır
iki kez artma

Fonksiyonel güncelleme gerekir
Hangisi fonksiyonel update?
- setCount(prev => prev + 1)
- setCount()
- count = count + 1
- setCount(count + 1)
Cevabı göster

setCount(count + 1) — setter'a bir fonksiyon verilir ve prev en son değerdir.

Fonksiyonel güncellemeyi yaz

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const bump = () => {
    setCount(____ => prev + 1);
  };
}

Cevabı göster

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const bump = () => {
    setCount(prev => prev + 1);
  };
}

Sıradaki ders: Çoklu state

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler