React Hook Serisi: 1-) UseState Nedir?

Herkese merhabalar. Bu seride sizlere bir javascript kütüphanesi olan React’ın, hook yapılarını konusunda bilgiler veriyor olacağım. Aynı zamanda bu hookları öğrenirken de örnekler ile pekiştiriyor olacağız. Hiç vakit kaybetmeden ilk hook yapısı olan useState ile başlayalım.

useState Nedir?

useState’e başlamadan önce state kavramını da bilmemiz çok önemli. State, bir uygulamada izlenmesi gereken veri veya özellikleri ifade eden yapıdır. Yani javascripte bir veri tanımlamak için nasıl var-let-const gibi yapılar kullanıyor isek, reactta da state yapısını kullanırız.

UseState ise react hook yapısında kullanılan state yönetimini sağlayabileceğiniz bir hook’dur. Oluşturulan component içerisine import edilmeside çok basittir.

import React, { useState } from 'react';

UseState başlangıçta aldığı tek argüman state’dir. Ama default değer almak zorunda değildir. Girilmemesi durumunda state değeri NaN olarak gözükecektir. React dökümantasyonunda bulunan küçük bir örnek ile devam edelim.

UseState Örnek

import React, { useState } from 'react';

function App() {
  // Yeni bir state değişkeni oluşturuldu, biz buna "count" diyeceğiz. Sayı sayacağız. :)
  const [count, setCount] = useState(0);
  // count : State değeridir.
  // setCount : State'in değerini değiştirebileceğimiz fonksiyon yapısıdır.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

count : O anki state değerini veren araçtır.

setCount : State in değerine etki etmemizi, değiştirmemizi sağlayan fonksiyon yapısıdır.

Yukarıda count adında bir useState oluşturmuş olduk. Return içerisinde bulunan butona onClick eventı ile counter değerini her bir tıklamada 1 sayı artıracak şekilde ayarlamış olduk. useState() değerini yani count değerini başlanğıçta 0 olarak belirledik. Dediğim gibi eğer bir değer vermeseydik sonuç her tıklamada NaN olarak dönecekti.