ReactJS – Reducing State with useReducer

The official React documentation defines useReducer as a React hook that allows you to add a reducer to your component. A reducer is a design pattern that is used to manage the state of a UI. It involves breaking down the application state into smaller, more manageable pieces, and defining a set of functions called reducers, which are responsible for updating those pieces of state in response to user actions or other events. While there may be some use cases that necessitate the use of third-party reducer tools (e.g. Redux), the useReducer hook is an excellent state reduction option for most React projects.