Wann würdest du `useReducer` statt `useState` verwenden?

Question

Accepted Answer

`useReducer` zentralisiert Zustandsübergänge in einer einzelnen **reinen Reducer-Funktion**, anstatt viele `useState`-Setter zu verteilen. Es ist Reacts eingebaute Version des Redux-Musters. ```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 ; } ``` ## Wie es funktioniert Du `dispatch`t eine **Action** (ein einfaches Objekt, das ein Ereignis beschreibt). React ruft `reducer(currentState, action)` auf und verwendet das zurückgegebene Objekt als neuen Zustand. Der Reducer ist **rein** (keine Nebenwirkungen, keine Mutation), was die Logik vorhersehbar und isoliert unit-testbar macht. ## Warum es wichtig ist - Der nächste Zustand **hängt vom vorherigen** Zustand auf nicht-triviale Weise ab. - Mehrere Werte **ändern sich zusammen** (z.B. `count` + `step` + `error`). - Die Update-Logik ist komplex genug, dass du sie über mehrere Handler wiederholst. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` hat eine **stabile Identität**, sodass die Übergabe durch Context oder an memoized Children keine Re-Renders verursacht. Bei einfachen, unabhängigen Werten ist normales `useState` immer noch verständlicher.