Managing State with useReducer()

Just like useState(), useReducer() is a React Hook. And just like useState(), it is a Hook that can trigger component function re-evaluations. But, of course, it works slightly differently; otherwise, it would be a redundant Hook.

useReducer() is a Hook meant to be used for managing complex state objects. You will rarely (probably never) use it to manage simple string or number values.

This Hook takes two main arguments:

• A reducer function
• An initial state value

This brings up an important question: what is a reducer function?

Understanding Reducer Functions

In the context of useReducer(), a reducer function is a function that itself receives two parameters:

• The current state value
• An action that was dispatched

Besides receiving arguments, a reducer function must also return a value: the new state. It's called a reducer function because it reduces the old state (combined with an action) to a new...