useReducer Pattern in React

From the React Design Patterns cheat sheet · State Management Patterns · verified Jul 2026

useReducer Pattern

Manage complex state transitions with a reducer function and dispatched actions

jsx

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset':     return { count: 0 };
    default: throw Error('Unknown action: ' + action.type);
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

💡 useReducer centralizes state logic - pure functions are easy to test in isolation

⚡ Action types should describe WHAT happened (user_added) not HOW to update (setUser)

📌 Pass an init function as the third arg for lazy initialization of expensive state

🟢 Use useReducer when state has 3+ sub-values or complex transitions - useState otherwise

useReducerstatereducer

More React tasks

Back to the full React Design Patterns cheat sheet