useReducer Hook'u

React'ta state yönetiminde kullanılan iki önemli hook'tan biri useState iken diğeri ise useReducer'dır. useReducer, state'in yönetimini sağlamak için kullanılan bir hook'tur ve özellikle büyük ve karmaşık state'lerin yönetiminde daha iyi bir seçenek olarak kabul edilir.

useReducer, bir state ve bir dispatch fonksiyonunu döndürür. dispatch fonksiyonu, state'i güncellemek için kullanılır. useReducer hook'u, bir reducer fonksiyonunu ve başlangıç state'ini alır. reducer fonksiyonu, mevcut state ve bir action nesnesi alır ve yeni bir state nesnesi döndürür.

useReducer hook'u, özellikle birden fazla state'i tek bir reducer fonksiyonu kullanarak yönetmek istediğimiz zamanlarda kullanışlıdır. Bu sayede, state'ler arasındaki ilişki daha net bir şekilde ortaya çıkabilir.

useState İle Sayaç Örneği

Şimdi, bir sayacın yönetiminiuseStateile yaparak örneklendirelim. Aşağıdaki örnek, sayacın state'ini ve setCount fonksiyonunu döndüren useState hook'unu kullanmaktadır:

import React, { useState } from 'react';

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

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

  function handleDecrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

Bu örnekte, useState hook'u, count adlı bir state ve setCount adlı bir fonksiyon döndürür. count state'i, 0 ile başlatılır.

handleIncrement ve handleDecrement fonksiyonları, setCount fonksiyonunu kullanarak count state'ini güncellemek için kullanılır. Örneğin, handleIncrement fonksiyonu setCount(count + 1) çağrısı yaparak count state'ini 1 artırır.

useReducer Kullanımı

Şimdi, aynı sayacın yönetiminiuseReducer ile yaparak örneklendirelim. Aşağıdaki örnekte, count adlı bir state tanımlanmıştır ve reducer fonksiyonu, INCREMENT veya DECREMENT tiplerindeki action nesnelerine göre state'i günceller:

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);

  function handleIncrement() {
    dispatch({ type: 'INCREMENT' });
  }

  function handleDecrement() {
    dispatch({ type: 'DECREMENT' });
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

Bu örnekte, useReducer hook'u, reducer fonksiyonunu ve başlangıç state'ini aldıktan sonra bir state nesnesi ve bir dispatch fonksiyonu döndürür. state nesnesi, 0 ile başlatılır.

dispatch fonksiyonu, INCREMENT veya DECREMENT tiplerindeki action nesnelerini alır ve reducer fonksiyonuna göndererek, state'i günceller. Bu örnekte, dispatch({ type: 'INCREMENT' }) veya dispatch({ type: 'DECREMENT' }) çağrıları, reducer fonksiyonuna gönderilen action nesneleridir.

reducer fonksiyonu, mevcut state'i ve belirli bir action nesnesini alır. action nesnesine göre, yeni bir state nesnesi oluşturulur ve döndürülür. Bu örnekte, INCREMENT action'ı gönderildiğinde, count değeri 1 arttırılır ve yeni bir state nesnesi oluşturulur. Benzer şekilde, DECREMENT action'ı gönderildiğinde, count değeri 1 azaltılır ve yeni bir state nesnesi oluşturulur.

useReducer, reducer fonksiyonu kullanarak state yönetimini sağlar ve birden fazla state'i tek bir yerden yönetmeyi kolaylaştırır. useReducer'ı kullanarak, karmaşık state'lerin yönetimini daha etkili bir şekilde yapabiliriz.

Sonuç

Bu yazıda, React uygulamalarında state yönetimini sağlamak için kullanılan useState ve useReducer hook'larını inceledik. useState hook'u, tek bir state'i yönetmek için kullanılırken, useReducer hook'u daha büyük ve karmaşık state'leri yönetmek için kullanışlıdır. useReducer'ın kullanımı, özellikle birden fazla state'i yönetmek istediğimiz zamanlarda daha etkili olabilir. Ancak, basit state'lerin yönetimi için useState daha uygun olabilir.

Her iki hook da, React'ta state yönetimini daha kolay ve etkili hale getirmek için kullanılan güçlü araçlardır. Hangi hook'un kullanılacağı, uygulamanın gereksinimlerine ve state'in boyutuna göre değişebilir.

Özellikle büyük uygulamalarda, state yönetimi önemlidir ve uygun bir yöntem kullanmak performansı ve yönetimi artırabilir. useReducer, state'in yönetimini daha kolay ve daha öngörülebilir hale getirebilir ve daha kolay bir şekilde güncelleme yapmanıza olanak tanır.

Umarım bu yazı, useState ve useReducer'ın nasıl kullanılabileceği hakkında fikir edinmenize yardımcı olmuştur. Hangi hook'u kullanmanız gerektiği hakkında daha fazla bilgi edinmek için React'in resmi dokümantasyonuna başvurabilirsiniz.