useReducer is very similar to useState, but it lets you move the state update logic from event handlers into a single function outside of your component.
It must be pure, should take the state and action as arguments
It should return the next state. State and action can be of any type.
initialArg: The value from which the initial state is calculated. It can be a value of any type. How the initial state is calculated from it depends on the next init argument.
If it’s not specified, the initial state is set to initialArg.
Otherwise, the initial state is set to the result of calling init(initialArg).
The current state. During the first render, it’s set to init or initialArg (if there’s no init).
The dispatch function lets you update the state to a different value and trigger a re-render.