Når ville du brukt useReducer i stedet for useState?

Question

Accepted Answer

`useReducer` sentraliserer tilstandsoverganger i en enkelt **ren reducer-funksjon**, i stedet for å spre mange `useState` setters. Det er Reacts innebygde versjon av Redux-mønsteret. ```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 vanlig objekt som beskriver en hendelse). React kaller `reducer(currentState, action)` og bruker det returnerte objektet som den nye tilstanden. Reduceren er **ren** (ingen bivirkninger, ingen mutasjon), noe som gjør logikken forutsigbar og enhetstestbar isolert. ## Når du foretrekker det fremfor useState - Den neste tilstanden **avhenger av den forrige** tilstanden på ikke-trivielle måter. - Flere verdier **endres sammen** (f.eks. `count` + `step` + `error`). - Oppdateringslogikk er kompleks nok til at du ville gjentatt den over handlere. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` har en **stabil identitet**, så det å sende den gjennom context eller til memoized barn forårsaker ikke re-renders. For enkle, uavhengige verdier er vanlig `useState` fortsatt klarere.