useState Hook, React'ta bir state tutmak için kullanılan bir Hook'tur. Bu hook, bir fonksiyonel bileşen içindeki bir durum değişkenini (state) yönetmenizi sağlar. useState kullanarak, bir değişkeni tanımlayabilir ve bu değişkenin değerini bileşenin yaşam döngüsü boyunca değiştirebilirsiniz.
Bu yazıda useState hook'unun detaylarını inceleyeceğiz.
useState Hook, React bileşenlerinde state yönetimini sağlamak için kullanılan bir JavaScript fonksiyonudur. useState, bir değer ve bu değeri değiştirmek için bir fonksiyon döndürür. Bu değer, bileşenin durumu ile ilişkili olabilir.
useState, işlev bileşenleri için kullanılan bir Hooks API'si olarak 2019 yılında React 16.8.0 sürümüyle tanıtıldı. useState, bileşenin state değişkenlerini yönetmek için önceki sürümlerde kullanılan this.setState() yöntemi yerine kullanılır.
useState Hook, bir fonksiyonel bileşende tanımlanır. Aşağıdaki örnek, bir sayacı gösteren bir bileşenin state'ini nasıl kullanacağınızı gösterir:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Yukarıdaki örnekte, useState ile iki değer döndürüyoruz:
count: Bu, bileşenin state değişkenidir ve varsayılan olarak 0 olarak ayarlanır.
setCount: Bu, count'u değiştirmek için kullanacağımız bir fonksiyondur.
useState, bileşenin state değişkenlerinin yanı sıra, bir fonksiyon döndürür. Bu fonksiyon, bileşenin state değişkenlerini güncelleme işlemini gerçekleştirir.
Yukarıdaki örnekte, setCount, butona tıklandığında count değişkenini artırmak için kullanılır. setCount, useState'de count değerini değiştirmek için kullanılan bir fonksiyondur. Bu, count değerinin değiştirilmesi gerektiğinde çağrılacaktır.
useState Hook, içerisinde iki parametre alır: bir state değişkeni ve bir fonksiyon.
State değişkeni, bileşenin durumunu tutmak için kullanılır. Bu değişken, bileşenin yaşam döngüsü boyunca değiştirilebilir. useState Hook, bu state değişkeninin başlangıç değerini de alabilir.
Fonksiyon, state değişkeninin güncellenmesi için kullanılır. useState Hook, bu fonksiyonu sağlar. Fonksiyon, yeni bir state değeri alabilir veya önceki state değerine bağlı olarak bir işlem yapabilir.
useState hook'u, React uygulamalarımızda state yönetimi için kullanabileceğimiz güçlü bir araçtır. Ancak, useState hook'u kullanırken, state değerlerini sadece hook içinde değiştirmemiz gerekir. Ayrıca, useState hook'u, bir component'in state'ini yönetmek için kullanabileceğimiz sadece birkaç React hook'tan biridir. Bu nedenle, React uygulamalarımızda farklı amaçlar için kullanabileceğimiz birçok farklı hook bulunmaktadır.
useState hook'u kullanarak state yönetimini nasıl gerçekleştirebileceğimizi öğrendik. Bu sayede, React uygulamalarımızda componentlerin state'lerini değiştirebileceğiz.
Kısaca özetleyecek olursak, useState hook'u, bir component içerisinde kullanılabilen bir fonksiyondur. Bu fonksiyon, bir dizi içindeki state değeri ve bu değeri güncellemek için kullanabileceğimiz bir fonksiyon döndürür. Daha sonra, bu değeri component içinde kullanabilir ve güncelleyebiliriz.