React useState nedir?

Bu yazıda React'ta bulunan Hooklardan biri olan useState'i kısaca inceleyeceğiz. React'in useState hook'u, işlevel bileşenlerde durum (state) tutmanızı ve güncellemenizi sağlayan bir React hook'udur. Bu hook, React uygulamalarında durum yönetimini kolaylaştırır.

useState hook'u, bir dizi halinde iki değer döndürür: mevcut durum değeri ve bu durumu güncellemek için bir işlev.

Genel sözdizimi şu şekildedir:

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

• state => mevcut durumu temsil eden değişkendir.

• setState => state değişkenini güncellemek için kullanılacak işlevdir.

• initialState => durumun başlangıç değeridir. Bu, useState hook'unun yalnızca bir kez çağırıldığında başlangıç değeri olarak kullanılır.

import React, { useState } from 'react';

function Counter() {
  // Counter bileşeni için bir durum tanımlayalım
  const [count, setCount] = useState(0);

  // count değerini artırmak için bir işlev
  const increment = () => {
    setCount(count + 1);
  };

  // count değerini azaltmak için bir işlev
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Bu örnekte, useState hook'u ile count adında bir durum tanımlanır ve başlangıç değeri olarak 0 atanır. increment ve decrement işlevleri, setCount işlevini kullanarak count durumunu günceller. Bu durum, sayfanın her yeniden render edildiğinde muhafaza edilir.

Bu örnek genel olarak state kullanımı anlatan basit bir örnektir ancak bu örnekte dikkat edilmesi gereken yerlere değinelim.

Referans Problemi

useState hook'u, eski state değerlerine bağlı olarak güncellenmiş bir state değeri döndürmez. Dolayısıyla, state'i güncellerken, eski state değerine doğrudan bağımlı olmamalısınız. Eğer bir güncelleme işlevi içinde state'in mevcut değerine dayalı bir güncelleme yapmanız gerekiyorsa, fonksiyonel güncelleme kullanmanız gerekebilir. Nedir fonksiyonel güncelleme?

  const increment = () => {
    	setCount(count + 1);
 	setCount(count + 1);
  };

Örneğin ben burada değerin 2 artmasını istiyorsam böyle bir kullanımda alacağım çıktı 1 arttığı yönünde olacaktır. Referans değeri olarak buradaki iki setCount'ta ilk değer olan 0 ı alacak yani

  const increment = () => {
    	setCount(count + 1);  // => Burası aslında setCount(0 + 1)
 	setCount(count + 1);  // Aynı şekilde burası da => setCount(0 + 1)
  };

Yani state güncellerken bu durumu aşmanız için referansı iyi ayarlamanız gerekmektedir.

// Doğru Kullanım
setCount(prevCount => prevCount + 1);

// Yanlış Kullanım
setCount(count + 1);

Bu şekilde referans ayarlamamızı yapabiliriz.

Bu kullanıma ek olarak dikkat etmeniz gereken diğer şeyler ise Başlangıç değerinin doğru ayarlanmasıdır. useState hook'una verilen başlangıç değeri, durumunuzun başlangıç değeridir. Bu değerin doğru ayarlanması, bileşeninizin doğru şekilde çalışmasını sağlar. Bir başka nokta ise ;

Optimizasyon

Gereksiz yere state güncellemelerinden kaçının. React, durum güncellemeleri sırasında bileşenin yeniden render edilip edilmemesi gerektiğini otomatik olarak belirleyebilir, ancak gereksiz güncellemeler performans sorunlarına neden olabilir