REACT HOOKS USE-STATE

Photo by Lautaro Andreani on Unsplash

React Hooks, React 16.8 sürümü ile birlikte gelmiştir. Sınıf bileşenlerinin aksine, fonksiyonel bileşenlerde durum yönetimini sağlayan bir özelliktir. React Hooks, sınıf bileşenlerine bağımlı olmayı azaltır ve bileşenlerin sade ve anlaşılır olmasını sağlar. Hooks kullanarak durum yönetimi, veri alışverişi ve yaşam döngüsü işlemlerini gerçekleştirmek daha kolay hale gelmektedir.

Yeni projelerde React Hook kullanımı yaygınlaşmıştır ve önerilmektedir. Ancak React sınıf bileşenlerinin kullanımı devam etmektedir.

useState: Durum (state) yönetimi için kullanılır. Bir durum değişkeni ve onu güncellemek için bir fonksiyon döndürür.

1: useState

“useState” React'ta state yönetimi için kullanılan bir Hook'tur. State, bir bileşende tutulan değişken değerlerini temsil eder. State, bileşenin durumunu ve içeriğini tutarak, bileşenin render edilmesini ve güncellenmesini sağlar.

Sınıf tabanlı bileşenlerde state yönetimi, this.state ve this.setState yöntemleri ile yapılırken, fonksiyonel bileşenlerde “useState” Hook'u kullanılarak gerçekleştirilir. “useState” fonksiyonu, bir dizi döndüren bir Hook'tur ve bu dizi iki eleman içerir:

const [state, setState] = useState(initialState);

Şimdi butona basıldığında counter ın değerini bir arttıran fonksiyonu useState ile oluşturalım.

function Counter(){

    const [count,setCount]=useState(0);

    function handleCLick() {
        setCount(count+1);
    }
    return(
        <>
            <p>Counter : {count}</p>
            <button onClick={handleCLick}>
                IncreaseButton
            </button>
        </>
    )
}

1: Counter isminde bir fonksiyon tanımlıyoruz.

2: count değerinin initial yani başlangıç değerini useState() methodu yardımı ile 0 değerine eşitliyoruz. useState bir array dönmektedir ve içerisine 2 adet değer alır.

• Bunlardan ilki “count” yani şimdiki state. Component render edildiği anda state e ilk değerini atar.
• İkincisi ise set fonksiyonu. Bu fonksiyon ise state i farklı bir değere güncellemeyi sağlar.

3: handleClick() fonksiyonu ile count u 1 arttırıyoruz.

4: Bu fonksiyon bize aşağıdaki ekran görüntüsündeki çıktıyı döndürecektir.

Bu örnekte Counter’ın değerini “IncreaseButton”’a bastığımızda 3 arttıracak fonksiyonu ise şu şekilde yazılır.

function handleCLick() {
        setCount(count=>count+1);
    }

1. setCount(count=>count +1 ) : Bu yöntemde, setCount fonksiyonuna bir updater fonksiyonu verilir. Updater fonksiyonu, mevcut durumu alır ve üzerine işlem yaparak yeni bir durum döndürür.

function handleCLick() {
        setCount(count+1);
    }

2. setCount (count+ 1) : Bu yöntemde, mevcut durum count değişkenine atanır ve üzerine 1 eklenerek yeni bir değer oluşturulur. Sonra bu yeni değer, setCount fonksiyonuna geçilerek durum güncellenir. Bu yöntem, durumu doğrudan güncellemenizi sağlar ve genellikle basit durum değişiklikleri için kullanılabilir.

Kodun tamamı ise şu şekilde olacaktır:

function CounterIncreaseMoreThanOne(){
    const [count,setCount]=useState(0)

    function increaseCounter(){
        setCount(count=> count + 1)
    }

    return (
        <>
            <p>Counter : {count}</p>
            <button onClick={() => {
                increaseCounter();
                increaseCounter();
                increaseCounter();
            }}>IncreaseButton</button>

        </>
    )


}

React-Hooks useState fonksiyonundan bahsettim. Bu şekilde örnekler çoğaltılabilir. Okuyan herkese faydalı olmasını diliyorum. Bir sonraki yazımda görüşmek üzere…