useState vs useReducer

Learn when to prefer useReducer over useState.

useState vs useReducer

Which one you choose depends on state complexity. For a single number or string useState is enough; for several related fields or many transitions useReducer is cleaner.

useReducer gathers logic in one place; you can test it without the component. useState needs fewer lines and fewer concepts.

Both are equally fast; the choice is about readability.

Transition table

The power of useReducer is that transitions read like a table. Each action type produces a new state; this makes debugging easy.

In useState the logic spreads across handlers; finding a bug means looking at several functions.

Later libraries like Redux will extend the same reducer model; learning the base here matters.

Exercise Two-way counter

Complete the skeleton. Write a reducer function; in switch(action.type) have case "up": return state + 1;, case "down": return state - 1; and default: return state;. Write a Counter component; import useReducer, define const [state, dispatch] = useReducer(reducer, 0);. Return <button onClick={() => dispatch({type: "up"})}>{state}</button>. Export it.

Show example solution

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "up": return state + 1;
    case "down": return state - 1;
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return <button onClick={() => dispatch({ type: "up" })}>{state}</button>;
}

export default Counter;

Test yourself

Best choice for several related fields and many transitions?
```
useReducer collects logic in one place.
```
- useReducer
- useRef
- useState
- a prop
Show answer

useReducer — useReducer gathers complex transitions.

useState vs useReducer: fill in the missing part

const [count, setCount] = ____(0);

Show answer

const [count, setCount] = useState(0);

useState vs useReducer: match the terms

useState

Simple state
useReducer

Complex state
dispatch

Sends an action
reducer

Pure function

Next lesson: Summary - useReducer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies