Using useReducer for state management

The useReducer hook is a state management hook in a React application. It is quite a bit more robust than the useState hook we discussed earlier in this chapter as it separates the state management logic in the function component from the component-rendering logic.

The useState hook encapsulates the state management function with component rendering logic, which may become complex to handle in a large React project with the need for complex state management. The following is the syntax for useReducer:

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

The useReducer hook accepts two arguments – the reducer, which is a function, and the initial application state. The Hook then returns two array values – the current state and the Dispatch function.

Basically, we need to understand these core concepts in useReducer:

• State: This refers to mutable data that can be changed over time. State doesn’t have...