React'ta State Kullanımı

Ürün adını içeren bir state oluşturmak için useState fonksiyonunu kullanalım:

jsxconst state = useState('prod');

Sonuç olarak state sabiti, ilk elemanında ürün adının depolandığı, ikinci elemanında ise adı değiştirmek için bir fonksiyon bulunan bir dizi olacaktır:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

Kısalık için genellikle dizi için ara sabit kullanılmaz, bunun yerine destructuring kullanılır:

jsxconst [name, setName] = useState('prod');

Şimdi ürün adıyla ilgili state'imizi bir yere yazdıralım:

jsxreturn <p>
  <span>{name}</span>
</p>;

Hepsini bir araya getirelim ve aşağıdaki kodu elde edelim:

jsximport React, { useState } from 'react';

function App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
  </div>;
}

export default App;

Bu kodu çalıştırırsak, başlangıçta div'in içinde state'in başlangıç değeri görüntülenecektir, bizim durumumuzda 'prod'. setName fonksiyonu ile state değiştirildiğinde, yeni state değeri otomatik olarak görüntülenecektir.