Understanding the useReducer Hook

What if a component never changed its state directly, but described each change in a short message, such as "increment" or "reset", and one function decided what every message does to the state? That function is called a reducer, and useReducer is the hook that connects a reducer to a component. It is an alternative to useState that keeps all the update logic for a piece of state in one place.

The Shape of useReducer

const [state, dispatch] = useReducer(reducer, initialState);

You give useReducer two arguments, and it returns two values:

• `reducer