useReducer

Part of the React course

A checkout form starts simple. There is a value, so you add useState. Then it needs an error message, so that is another useState. Then a loading flag, then a "has the user touched this field yet" flag, and now four separate pieces of state have to be updated in the right combination by six different event handlers. Submitting has to set loading true, clear the error, and disable the button.

useReducer is React's answer to that. Instead of scattering the update rules across handlers, you write one function that describes every way the state is allowed to change, and components request a change by name. The mental image is a vending machine. The machine holds all the state, its wiring decides what each button does, and you interact with it by pressing a labelled button rather than by reaching inside and...