What is the difference between useState and useReducer?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'add':    return { ...state, items: [...state.items, action.item], total: state.total + action.price };
    case 'clear':  return { items: [], total: 0 };
    default:       return state;
  }
}

export default function Cart() {
  const [state, dispatch] = useReducer(reducer, { items: [], total: 0 });

  return (
    <>
      <button onClick={() => dispatch({ type: 'add', item: 'Lamp', price: 20 })}>Add</button>
      <button onClick={() => dispatch({ type: 'clear' })}>Clear</button>
      <p>{state.items.length} items — ${state.total}</p>
    </>
  );
}