React State Management in 2022
What it was and what it is now
In the debate of the state management wars, there is no right answer, only a wrong answer.
With the introduction of React in May 2013, there was also an introduction to multiple UI issues that had to be solved by the developer. It is important we understand those terms, before we begin our journey. Some of them are:
- UI State —the state of the application a.k.a. toggles, modals, settings
- Form State — the different states of a form (disabled, validating, validated, onBlur validation, onSubmit validation, loading, submitting etc…)
- Server Cache State — the state from the server, which is cached client-side
- URL State — the state managed by your browser (filtering, querying etc)
We are going to discuss more in depth about UI state tools and how each has solved (or not) a problem, and what you can do today.
In 2014, the React team came with the Flux Concept, which was an architecture for React applications. Because of this, a lot of new libraries implementing this idea came to life.
The first big one was:
Redux
It appeared in June 2015 as a way to resolve the state management part of an application. Their vision is having a centralized state on the whole application which is easy to debug (thanks to their Redux DevTools).
A fact I find interesting is that although it is used mostly for React (they also created official react bindings for it), it is framework agnostic, meaning you could use it with other tools.
It had a lot of flexibility and you could write it almost however you wanted. There was no clear way to code with it. Of course, you have the documentation, but Redux was by design unopinionated.
While some people prefer unopionated software and say it’s amazing, I beg to differ. I prefer having the same architecture across multiple projects, or at least similar. Also, for even the smallest state, you had to create a lot of code. Actions, dispatchers, tying the application, types, the state is read-only and changing it was actually not as easy as you may think or remember.
This was by far the most selected option for multiple projects until a few years ago. The team behind the project listened the community and they created a new, opinionated solution for this, which is called Redux Toolkit. I worked with it on multiple projects and the changes are so drastic that I would advise anyone using Redux to upgrade the codebase to it (if they still need Redux).
But this was done at a much later time (October 2019 to be exact), so in the meantime, developers were still trying to figure out how to do state management easily. Objects still couldn’t be updated in the state and people wanted an easy solution for this.
Enter:
Mobx
The idea of Mobx was that you could have multiple smaller stores. It works by using proxies to make arrays and plain objects observable.
The documentation was very good and the API was very simple. I do not have a very rich experience with it and to be honest, I don’t want to.
Although it’s easier than Redux code-wise, the lack of a Chrome Extension that shows the current state is a deal-breaker for me (also consoling it just shows the proxies, instead of the objects).
Context
Context is React’s way of managing state in version 16.3.
You create a “Context” object, then you put a Provider component and all children components can access that data.
It’s pretty easy to use, but you need to take into consideration that updates may re-render stuff when you don’t want to. Other than that, it’s a pretty solid choice for a state management tool.
Still, we want to simplify things even more, so we still have a few ways to go.
Hooks
This one changed the game. I won’t get in the nitty gritty, but it’s one of the easiest ways to have state in your app. Just create a function, put some state in it, throw an useEffect and voila.
Simple, efficient, no need for a third party package.
What more could you ask for?
Well, it turns out, ask and you shall receive.
Zustand
Out of this list, this is my favorite one and the one I usually install in all frontend projects. Zustand is a simple, lightweight, fast, and React hooks based state management.
Apart from the convenience, Zustand solves some of the common problems with other libraries like complex flows, over-engineered solutions. It also solves some common documented issues with major existing libraries and patterns like the Context loss issue, React concurrency issues, Zombie child problem.
It also works amazing with React-Query. I didn’t discuss about server cache state, but this is the best tool to fix that. It is hands down one of the best libraries for managing server state. It works amazingly well out-of-the-box, with zero-config, and can be customized to your liking as your application grows.
So, if you have a normal web app (CRUD), you can use react-query for most state and insert zustand for something like dark mode, navigation togglers and only the small stuff that is still needed.
Jotai/Recoil
Unfortunately, I didn’t get to work with those as much as I wanted. I tried to read the documentation multiple times and see why it would be better than react-query and zustand, and why I NEED it in my projects, but couldn’t find a reason.
Also take in consideration, they are not as adopted as other tools. So you might wanna skip them for now, and not change the whole codebase of your project.
Out of the two of them though, personally, I prefer Jotai due to those reasons (that are in their documentation):
- Minimalistic API
- No string keys
- TypeScript oriented
Conclusion
I hope you learned something today! React is the biggest framework for frontend ( yes, framework, I said it!) and so many developers poured their hearts and souls into it and I’m pretty happy with the current way to code.
We have some of the best tools at our disposal nowadays and we are more than ever capable of reaching great heights with them.
Use react-query and zustand, if you don’t already. You will thank me later!
In the meantime, try for yourself jotai and recoil and see if they are to your liking.
I would also love to know your opinion and what you use! Share your stack in the comment section!
If you enjoyed my content:
You’ll probably like these, as well:
