useReducer in React

From the React Hooks cheat sheet · State & Updates · verified Jul 2026

useReducer

Complex state logic with actions

javascript
// Define reducer
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 }
    case 'decrement': return { count: state.count - 1 }
    case 'reset':     return initialState
    default:          throw new Error()
  }
}

// Use in component
const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })
✅ Better than useState for complex logic
💡 Actions make state changes predictable
⚡ Great for forms with many fields

More React tasks

Back to the full React Hooks cheat sheet