Wanneer zou u useReducer gebruiken in plaats van useState?

Question

Accepted Answer

`useReducer` centraliseert state transitions in één **pure reducer function**, in plaats van veel `useState` setters uit elkaar te zetten. Het is React's ingebouwde versie van het Redux-patroon. ```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 ; } ``` ## Hoe het werkt U `dispatch` een **action** (een gewoon object dat een gebeurtenis beschrijft). React roept `reducer(currentState, action)` aan en gebruikt het geretourneerde object als de nieuwe state. De reducer is **pure** (geen bijwerkingen, geen mutatie), wat de logica voorspelbaar en unit-testable in isolatie maakt. ## Wanneer het verkiezen boven useState - De volgende state **hangt af van de vorige** state op niet-triviale manieren. - Meerdere waarden **veranderen samen** (bijv. `count` + `step` + `error`). - Update logica is complex genoeg om deze in meerdere handlers te herhalen. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bonus: `dispatch` heeft een **stabiele identiteit**, dus het doorgeefan via context of naar memoized children veroorzaakt geen re-renders. Voor eenvoudige, onafhankelijke waarden is plain `useState` nog steeds duidelijker.