Adı : useState vs useReducer: Hangisi ne zaman tercih edilmeli?

React, uygulama geliştirmesi için birçok kullanışlı API sunar. Bunların arasında useState ve useReducer de bulunuyor. Ancak, birçok geliştirici bu iki API arasındaki farkları ve hangi durumlarda kullanılması gerektiğini anlamakta zorlanıyor.

Bu yazıda, useState ve useReducer arasındaki farkların ve hangi durumlarda hangisinin kullanılması gerektiğinin altını çizeceğim.

useState Nedir?

useState, React'ta yer alan bir fonksiyondur ve React'in temel bir parçasıdır. Bileşenin durumunu yönetmek için kullanılır. useState, halihazırda bulunan bir durumun alınması ve işlenmesi için gereken mantığı sağlamak için kullanılır. Bu durum genellikle bir obje, dizi veya işlev türündedir.

useState, basit, hızlı ve işlevseldir. Ancak, daha karmaşık bir durum yönetimi gerektiğinde veya birkaç bileşen veya bir grup bileşen arasında bir durumu paylaşmak istediğinizde, kullanımı zor hale gelebilir.

useReducer Nedir?

useReducer, useState yerine kullanılabilecek bir alternatif durum yönetimidir. Kullanımı daha karmaşıktır, ancak bileşenin daha karmaşık durumlarını ele almak için daha fazla özelleştirme seçeneği sunar.

useReducer, bir durum nesnesini talep etme ve durumu güncellemek için bir işlev sağlama yöntemidir. Bu işlev, mevcut durumda değişiklik yapmak için tasarlanmış bir işleyicidir ve bir sonraki durum nesnesini döndürür.

useState vs useReducer: Hangisi Hangi Durumda Tercih Edilir?

Yeni geliştiriciler tarafından en yaygın hata, useState ve useReducer'in birbirinin yerine kullanılabileceğini düşünmeleridir. Her iki API de durumları yönetmek için farklı amaçlarla tasarlanmıştır.

useState;

- Basit durumların yönetimi için kullanılır.
- Bileşenler arasında durum paylaşmak için uygun değildir.
- Tek bir öğeyi yönetmek için kullanılır.

useReducer;

- Karmaşık durum yönetimini gerektiğinde kullanılır.
- Bileşenler arasında durum paylaşmak için idealdir.
- Birden fazla öğe üzerinde durumu yönetmek için kullanılır.

useState'ın en yaygın kullanımı, bir işlev bileşeninde bir sıcaklık veya form durumu gibi basit bir durum yönetimidir.

Aşağıdaki örnekte, useState sıcaklık durumu yönetimi için kullanılır.

```JS
import React, { useState } from 'react';

const Temperature = () => {
const [temperature, setTemperature] = useState(22);

const handleIncreaseTemp = () => {
setTemperature(temperature + 1);
};

const handleDecreaseTemp = () => {
setTemperature(temperature - 1);
};

return (

);
};
```

useReducer ise birden fazla durumu yönetmek için daha uygun bir API'dir. Aşağıdaki örnekte bir tıklama sayacı ve renk durumu yönetmek için kullanılır.

```JS
import React, { useReducer } from 'react';

const initialState = {
count: 0,
color: 'red',
};

const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
case 'DECREMENT':
return {
...state,
count: state.count - 1,
};
case 'RED':
return {
...state,
color: 'red',
};
case 'GREEN':
return {
...state,
color: 'green',
};
default:
return state;
}
};

const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);

return (

);
};
```

Sık Sorulan Sorular

Q: useState ve useReducer arasındaki fark nedir?

A: useState basit durumlar için kullanılırken, useReducer daha karmaşık durumları yönetmek için tasarlanmıştır. Bileşenler arasında durum paylaşmak gerektiğinde useReducer tercih edilir.

Q: useState'a props nasıl aktarılır?

A: useState, bir bileşen içinde tanımlanır ve bileşenin kendisi props olarak kullanılabilir.

Q: Kullanılan bir bileşende hangi durum yönetimi yöntemi kullanılmalıdır?

A: Durum yönetimi gerektiren bileşenler için useState veya useReducer seçilmelidir. Basit durumlar için useState, karmaşık yapılar için useReducer tercih edilmelidir."