Quando você usaria useReducer em vez de useState?

Question

Accepted Answer

`useReducer` centraliza transições de estado em uma única **função reducer pura**, em vez de espalhar muitos setters de `useState`. É a versão built-in do React do padrão Redux. ```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 ; } ``` ## Por que isso importa Você `dispatch` uma **action** (um objeto simples descrevendo um evento). React chama `reducer(currentState, action)` e usa o objeto retornado como o novo estado. O reducer é **puro** (sem efeitos colaterais, sem mutação), o que torna a lógica previsível e testável em isolamento. ## Quando preferir em relação a useState - O próximo estado **depende do estado anterior** de maneiras não triviais. - Vários valores **mudam juntos** (por exemplo, `count` + `step` + `error`). - A lógica de atualização é complexa o suficiente para que você a repetiria em múltiplos handlers. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Bônus: `dispatch` tem uma **identidade estável**, então passá-lo através de context ou para filhos memoizados não causa re-renders. Para valores simples e independentes, o `useState` simples ainda é mais claro.