How I write React components as state machines

Sometime ago I started working with React again and after some few weeks I already had one of that components with dozens of useState calls. At that point I learned useReducer hook (I already used Redux before but never this hook). In this post I show how I write components with useReducer as state machines and how this make it more predictable and easier to manage the state updates. useReducer is a React hook to let you use a reducer, i.e. a function that receives a state , and an action and returns a new