Kiedy byś użył useReducer zamiast useState?

Question

Accepted Answer

`useReducer` centralizuje przejścia stanu w jednej **czystej funkcji reducer**, zamiast rozpraszać wiele setterów z `useState`. To wbudowana wersja wzorca Redux w React. ```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 ; } ``` ## Dlaczego to ważne Wysyłasz **action** (zwykły obiekt opisujący zdarzenie) za pomocą `dispatch`. React wywołuje `reducer(currentState, action)` i używa zwróconego obiektu jako nowego stanu. Reducer jest **czysty** (bez efektów ubocznych, bez mutacji), co sprawia, że logika jest przewidywalna i testowalna jednostkowo w izolacji. ## Kiedy preferować to zamiast useState - Następny stan **zależy od poprzedniego** stanu w sposób niezwyczajny. - Kilka wartości **zmienia się razem** (np. `count` + `step` + `error`). - Logika aktualizacji jest na tyle złożona, że powtarzałbyś ją w wielu handlerach. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` ma **stabilną tożsamość**, więc przekazanie go przez context lub do zmemoizowanych dzieci nie powoduje re-renderów. Dla prostych, niezależnych wartości zwykły `useState` jest nadal jaśniejszy.