¿Cuándo usarías useReducer en lugar de useState?

Question

Accepted Answer

`useReducer` centraliza las transiciones de estado en una única **función reductora pura**, en lugar de dispersar muchos setters de `useState`. Es la versión integrada en React del patrón de 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 ; } ``` ## Cómo funciona Tú haces `dispatch` de una **acción** (un objeto simple que describe un evento). React llama a `reducer(currentState, action)` y usa el objeto devuelto como el nuevo estado. El reductor es **puro** (sin efectos secundarios, sin mutación), lo que hace que la lógica sea predecible y se pueda probar unitariamente de forma aislada. ## Cuándo preferirlo sobre useState - El siguiente estado **depende del estado anterior** de maneras no triviales. - Varios valores **cambian juntos** (por ejemplo, `count` + `step` + `error`). - La lógica de actualización es lo bastante compleja como para que la repitieras entre varios manejadores. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Ventaja adicional: `dispatch` tiene una **identidad estable**, por lo que pasarlo a través del contexto o a componentes memorizados no provoca re-renders. Para valores simples e independientes, `useState` por sí solo sigue siendo más claro.