Когда вы бы использовали useReducer вместо useState?

Question

Accepted Answer

`useReducer` централизует переходы состояния в одной **чистой функции reducer**, вместо того чтобы разбросать много setters из `useState`. Это встроенная версия React паттерна 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 ; } ``` ## Почему это важно Вы `dispatch` **action** (простой объект, описывающий событие). React вызывает `reducer(currentState, action)` и использует возвращённый объект как новое состояние. Reducer является **чистым** (без побочных эффектов, без мутаций), что делает логику предсказуемой и легко тестируемой изолированно. ## Когда предпочесть вместо useState - Следующее состояние **зависит от предыдущего** состояния нетривиальным образом. - Несколько значений **изменяются вместе** (например, `count` + `step` + `error`). - Логика обновления достаточно сложна, чтобы вы повторяли её в разных обработчиках. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` Бонус: `dispatch` имеет **стабильную идентичность**, поэтому передача его через context или мемоизированным потомкам не вызывает re-renders. Для простых независимых значений простой `useState` всё ещё более понятен.