React'te State Yönetimi: useState vs useReducer Hangisini Seçmelisin?

React uygulamalarında state yönetimi çok önemli. Başlangıçta useState ile başlayan çoğu geliştirici, zaman içinde useReducer'a geçiş yapması gerektiğini fark ediyor.

useState basit durumlarda mükemmel. Tek bir değer, boolean, veya küçük bir nesne yönetiyorsan useState'i kullan. Örneğin bir form inputu, modal açık/kapalı durumu veya sayaç gibi.

1const [count, setCount] = useState(0);
2const [name, setName] = useState('');

Ancak state karmaşıklaştıkça, özellikle birden fazla ilişkili state varsa sorun başlıyor. Her setState çağrısı ayrı bir render tetikliyor ve kodu takip etmek zorlaşıyor.

useReducer, birden fazla state değişkeninin birbirine bağlı olduğu durumlarda çok daha temiz. Örneğin bir form validasyonu, alışveriş sepeti veya karmaşık bir UI durumu yönetiyorsan useReducer ideal.

1const initialState = { count: 0, error: null };
2
3function reducer(state, action) {
4switch(action.type) {
5case 'INCREMENT':
6return {...state, count: state.count + 1 };
7case 'SET_ERROR':
8return {...state, error: action.payload };
9default:
10return state;
11}
12}
13
14const [state, dispatch] = useReducer(reducer, initialState);

useState ile 5-6 tane setState fonksiyonu çağırmak yerine, useReducer ile tek bir dispatch çağrısı yapıyorsun. Kod daha okunabilir ve test etmesi daha kolay. Ayrıca reducer fonksiyonu componentten bağımsız olduğu için yeniden kullanılabilir.

Eğer global state yönetimi gerekiyorsa (Redux, Context API gibi), useReducer + Context kombinasyonu güçlü bir çözüm.

Basit: useState. Karmaşık: useReducer. Hepsi global: Redux veya Zustand.