När skulle du använda useReducer istället för useState?

Question

IT Interview Practice · Accepted Answer

`useReducer` centraliserar state-övergångar i en enda **pure reducer-funktion**, istället för att sprida många `useState` setters. Det är Reacts inbyggda version av 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 ; } ``` ## Hur det fungerar Du `dispatch`:ar en **action** (ett vanligt objekt som beskriver en händelse). React anropar `reducer(currentState, action)` och använder det returnerade objektet som det nya state. Reducern är **pure** (inga bieffekter, ingen mutation), vilket gör logiken förutsägbar och enhetstestbar isolerad. ## När man föredrar det framför useState - Nästa state **beror på föregående** state på icke-triviala sätt. - Flera värden **ändras tillsammans** (t.ex. `count` + `step` + `error`). - Uppdateringslogiken är komplex nog att du skulle upprepa den över handlers. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` har en **stabil identitet**, så att skicka den genom context eller till memoized children orsakar inte re-renders. För enkla, oberoende värden är vanlig `useState` fortfarande tydligare.

Hur det fungerar

När man föredrar det framför useState

Relaterade frågor