useState direktifi ne işe yarar?

useState React'te fonksiyonel bileşenlere durum eklemeyi sağlayan bir kaktır. İki öğeden oluşan bir dizi döner: geçerli durum değeri ve onu güncellemek için bir fonksiyon. Güncelleme fonksiyonu çağrıldığında, bileşen yeni değerle yeniden render edilir.

Kullanım örneği:

import { useState } from 'react';

function Counter() {
  // 'count' geçerli durumu, 'setCount' güncelleme fonksiyonudur
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Artır
      </button>
    </div>
  );
}

Ana özellikler:

• Durum ekler: Daha önce yalnızca sınıf bileşenlerde kullanılabilen durumu fonksiyonel bileşenlerde kullanmaya olanak tanır.
• Güncelleme fonksiyonu: Durumu değiştirmek için özel bir fonksiyon döner.
• Yeniden render: Güncelleme fonksiyonu aracılığıyla durumu değiştirmek, bileşenin yeniden render edilmesine neden olur.
• Primitifler ve nesneler: Her türlü veri tipini saklayabilir: sayılar, dizgeler, booleanler, nesneler, diziler.
• Tembel başlatma: Başlangıç değeri, yalnızca ilk renderda çalışan bir fonksiyon olabilir, bu da pahalı hesaplamalar için faydalıdır.

const [data, setData] = useState(() => {
  // Pahalı hesaplamalar yalnızca bir kez yapılır
  const initialData = someExpensiveCalculation();
  return initialData;
});