useState, React'te bir bileşenin durumunu (state) tutmasını sağlayan temel bir hook'tur. State, zamanla değişebilen ve değiştiğinde arayüzün yeniden çizilmesine yol açan veridir (örneğin bir sayaç değeri).

Temel kullanım

import { useState } from 'react';

function Sayac() {
  const [sayi, setSayi] = useState(0);
  return (
    <button onClick={() => setSayi(sayi + 1)}>
      Tıklama: {sayi}
    </button>
  );
}

Burada useState(0) başlangıç değerini 0 yapar. Geriye iki şey döner: mevcut değer (sayi) ve onu güncelleyen fonksiyon (setSayi).

Neden doğrudan değiştiremem?

sayi = sayi + 1 yazmak işe yaramaz; React değişikliği fark etmez. Her zaman güncelleme fonksiyonunu (setSayi) kullanmalısın ki React arayüzü yeniden çizsin.

Önceki değere göre güncelleme

Yeni değer eskisine bağlıysa, fonksiyon biçimini kullanmak güvenlidir:

setSayi(onceki => onceki + 1);

Sık yapılan hatalar

  • State'i doğrudan değiştirmek (mutasyon) yerine her zaman set fonksiyonunu kullan.
  • Hook'ları koşul veya döngü içinde çağırma; her zaman bileşenin en üstünde çağır.