useState vs useReducer

In one minute

Both hooks hold state; useState is in fact a useReducer with a built-in reducer. The choice is about shape. A value that changes on its own (a theme, an open flag, a search string) → useState. Several values that change together, or a next state that depends on other state → useReducer: all the transition logic goes into one pure function (state, action) => newState, React always calls it with the latest state, and the component just sends actions with dispatch. Start with useState; switch when you notice updates that have to read or keep several values in step.

You’ll be able to: pick the right hook, explain the stale-closure bug that tips the balance, and test state logic without rendering.

1const [past, setPast] = useState([])2const [present, setPresent] = useState('Ceramic Mug')3const set = useCallback(next => {4  setPast([...past, present]) // values from render 15  setPresent(next)6}, [past, present])78useEffect(() => set('Desk Lamp'), [])9useEffect(() => set('Trail Backpack'), [])

1function historyReducer(state, action) {2  const { past, present } = state3  if (action.type === 'set') return {4    past: [...past, present],5    present: action.next, future: [],6  }7}89const [state, dispatch] = useReducer(historyReducer, initial)10const set = useCallback(next => dispatch({ type: 'set', next }), [])1112useEffect(() => set('Desk Lamp'), [])13useEffect(() => set('Trail Backpack'), [])

The example: “Recently viewed” with undo

The product page remembers what you looked at: past, present and future. Two things set it right after mount (a product opened from a link, another restored from a tab):

function RecentlyViewed({ useUndo }: { useUndo: typeof useUndoReducer }) {
	const [state, set] = useUndo('Ceramic Mug')
	useEffect(() => set('Desk Lamp'), []) // e.g. opened from a link
	useEffect(() => set('Trail Backpack'), []) // e.g. restored from a tab
	return <pre id="state">{JSON.stringify(state)}</pre>
}

Three useStates

function useUndoStates(initial: string) {
	const [past, setPast] = useState<string[]>([])
	const [present, setPresent] = useState(initial)
	const [future, setFuture] = useState<string[]>([])
	const set = useCallback(
		(next: string) => {
			if (next === present) return
			setPast([...past, present]) // past and present come from this render
			setPresent(next)
			setFuture([])
		},
		[past, present],
	)
	return [{ past, present, future }, set] as const
}

final state: {"past":["Ceramic Mug"],"present":"Trail Backpack","future":[]}

“Desk Lamp” is missing from past. Both effects called the same set, created during the first render, so both read past = [] and present = "Ceramic Mug"; the second update overwrote the first. Adding set to the effects’ dependencies makes it worse: set changes whenever past/present change, so the effects would run again and again.

useReducer

type Action = { type: 'set'; next: string } | { type: 'undo' } | { type: 'redo' }

function historyReducer(state: History, action: Action): History {
	const { past, present, future } = state
	switch (action.type) {
		case 'set':
			if (action.next === present) return state
			return { past: [...past, present], present: action.next, future: [] }
		case 'undo':
			if (!past.length) return state
			return { past: past.slice(0, -1), present: past[past.length - 1], future: [present, ...future] }
		case 'redo':
			if (!future.length) return state
			return { past: [...past, present], present: future[0], future: future.slice(1) }
	}
}

function useUndoReducer(initial: string) {
	const [state, dispatch] = useReducer(historyReducer, { past: [], present: initial, future: [] })
	const set = useCallback((next: string) => dispatch({ type: 'set', next }), [])
	return [state, set] as const
}

final state: {"past":["Ceramic Mug","Desk Lamp"],"present":"Trail Backpack","future":[]}

Nothing was lost. set only dispatches; it reads no state, so there’s nothing to go stale, and its dependency list is empty. React runs the reducer for each action in order with the current state.

(You could also fix the useState version by merging the three values into one object and using updater functions everywhere. It works, but you end up writing a reducer inside each callback.)

Reducers are plain functions

const s0: History = { past: ['Ceramic Mug'], present: 'Desk Lamp', future: [] }
log('historyReducer(s0, undo) →', historyReducer(s0, { type: 'undo' }))

historyReducer(s0, undo) → {"past":[],"present":"Ceramic Mug","future":["Desk Lamp"]}

No component, no hooks, no DOM: every transition can be unit-tested with a function call.

When useState is the better choice

A theme toggle is one independent value:

function useTheme() {
	const [theme, setTheme] = useState<'light' | 'dark'>(() => (localStorage.getItem('theme') as 'light' | 'dark') ?? 'light')
	useEffect(() => localStorage.setItem('theme', theme), [theme])
	return [theme, setTheme] as const
}

Rewriting it with useReducer, action types and a switch adds ceremony and nothing else. Simplify that reducer to (prev, next) => next and you’ve reinvented useState.

Decision guide

Both setters (setState and dispatch) keep the same identity across renders, so either is safe in dependency arrays and as a prop to memoized children.

Interview Q&A

Related

• Building a Cart: the same history logic with useState + updater functions.
• React Re-rendering: stale closures in general.
• Hooks Under the Hood (React Internals): useState is useReducer inside React.

Sources

• Kent C. Dodds, Should I useState or useReducer? (the vault note this one is based on)
• react.dev: useReducer, Extracting state logic into a reducer

Primary source: kentcdodds.com/blog/should-i-usestate-or-usereducer