Hvornår ville du bruge useReducer i stedet for useState?

Question

Accepted Answer

`useReducer` centraliserer state-overgange i en enkelt **ren reducer-funktion**, i stedet for at sprede mange `useState` setters rundt omkring. Det er Reacts indbyggede version af Redux-mønstret. ```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 ; } ``` ## Hvordan det fungerer Du `dispatch`'er en **action** (et simpelt objekt, der beskriver en begivenhed). React kalder `reducer(currentState, action)` og bruger det returnerede objekt som den nye state. Reducer'en er **ren** (ingen bieffekter, ingen mutation), hvilket gør logikken forudsigelig og enhedstestbar isoleret. ## Hvornår man foretrækker det frem for useState - Den næste state **afhænger af den forrige** state på ikke-trivielle måder. - Flere værdier **ændres sammen** (f.eks. `count` + `step` + `error`). - Opdateringslogik er kompleks nok til at du ville gentage den på tværs af handlers. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` har en **stabil identitet**, så passage af den gennem context eller til memoized børn forårsager ikke re-renders. For simple, uafhængige værdier er almindelig `useState` stadig klarere.