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

Continue with React Design Patterns

Save the full cheat sheet or work through every related task.

Open full sheet

More React tasks

Back to the full React Design Patterns cheat sheet