Managing state in React is one of the main issues you'll be facing while developing React websites.
useState is of course the most common way to create and manage state in (functional) React components.
There's also a lot of libraries offering opinionated ways to manage your entire (or part of) state, like Redux, Mobx, Recoil or XState.
But before jumping to a library to help you manage your state issues, you should be aware of another native way to manage your state in React:
useReducer. It can be very powerful when used in the right way and for the right purpose. In fact, it's so powerful that the famous Redux library can be thought of as just a big, optimized
useReducer (as we'll see).
In this article, we'll start by explaining what
useReducer is and how to use it, giving you a good mental model and examples. We'll then go over a
useReducer comparison to learn when to use which.
And for the TypeScript users out there, we'll also see how to use TypeScript and
Let's dive in!