useState yerine useReducer ne zaman kullanırsınız?

Question

Accepted Answer

`useReducer` birçok `useState` setter'ını dağıtmak yerine, state geçişlerini tek bir **pure reducer function**'da merkezileştirir. React'ın Redux pattern'inin built-in versiyonudur. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## Nasıl çalışır Bir **action** (bir olayı tanımlayan düz bir object) `dispatch` edersiniz. React `reducer(currentState, action)`'ı çağırır ve döndürülen object'i yeni state olarak kullanır. Reducer **pure**'dür (side effect'i yok, mutation yok), bu da mantığı tahmin edilebilir ve yalıtımlı birim testi yapılabilir kılar. ## useState'i ne zaman tercih etmelisiniz - Sonraki state, önemsiz olmayan şekillerde **önceki** state'e **bağlıdır**. - Birkaç değer **birlikte değişir** (ör. `count` + `step` + `error`). - Update mantığı, handler'lar arasında tekrarlamanız gereken kadar karmaşıktır. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Ek: `dispatch` **kararlı bir kimliğe** sahiptir, bu nedenle context aracılığıyla veya memoized child'lara geçmek re-render'lara neden olmaz. Basit, bağımsız değerler için, düz `useState` yine de daha açıktır.