React Hook Serisi: 1-) UseState Nedir?

Önemli Uyarı

Bu içerik sahibine Adsense Reklamları ile destekte bulunabilirsiniz. Tamamen ücretsiz bir destektir. 😁


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.

react-hook-serisi-1-usestate-nedir

Bu yazımda react de bulunan bir hook aracı olan useState i öğrenmiş olduk. Bir sonraki hook aracı olan useEffect blog yazımda görüşmek üzere…

Kaynak: React Dökümantasyonu

Lütfen bir yorum bırakınız

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir