Today I have my top 5 React state management libraries for you, in no particular order. Some of them you almost certainly know, while others might surprise you. As always, I'll give you a brief description, and if it catches your eye, then be sure to check out the linked docs.
Anyway, let's dive in!
Redux
You knew this was coming. Redux has been pretty much no. 1 when it comes to state management libraries for quite a while now. Sure, it's commonly bundled with React, but its core is independent and thus, it can be used with any UI library or framework.
So, yes - Redux is de-facto "the default" of its kind. But it starts to "show its age" and if not that, then to irritate some devs. Don't get me wrong - it's a great library, but its size, steep learning curve, and verbose action-reducer approach to state management can make some people want to switch.
Still, Redux is the most popular of its kind, has the largest community and the biggest ecosystem, so it's not going anywhere anytime soon.
MobX
Another surprise, right? Similar to Redux, but more like no. 2, MobX is an immensely popular, batteries-included state management library meant mainly (but not exclusively) for React.
Now, MobX is certainly not a small library, but when compared to Redux, some might find its API and observable approach a bit more pleasing. There's still a noticeable learning curve for a library of this kind, but after that, it really feels nice and less repetitive than traditional Redux.
I don't know, maybe it's just me. But to give you the other side of the coin, MobX is certainly not for minimalists. Its API is good and can lead to some really nice and clean code, but deep down it's a heavy library, that's pretty hard to master fully. And on top of that, you're also getting a noticeably smaller community and ecosystem.
Recoil
Ok, so now we're getting into somewhat uncharted, but certainly a bit more interesting territory.
You might be familiar with Recoil. It gained a lot of traction when it "launched" in an unstable phase at the beginning of this year, as a "Facebook experiment".
Even though it's still an experimental project, the fact that it's developed by people at Facebook (the birthplace of React), certainly helped boost its popularity, to a point where some people could even be using it in production right now.
But that doesn't mean that Recoil has nothing else going for it. It's almost entirely the opposite! A modern atom-based approach to state management and fluid, hook-centric API do make it quite appealing.
But, right now because of Recoil's experimental stage, I'd recommend against using it in production-grade projects. Try it on the sidelines, and keep an eye on its development (possibly even contribute to it) to see how things turn out.
Akita
Next up, Akita is a bit of a lesser-known state management library. It's similar to MobX, but it diverts to a more Object-Oriented (OO) API, rather than the functional one like MobX.
So, Akita differentiates itself through its OO approach. It's especially visible in its heavy use of TypeScript and Decorators. Now, while TypeScript isn't reserved for OOP and is wildly supported (most notably by all libraries on this list), Decorators are more of a niche feature. Apart from Akita, MobX is the only library on this list that officially supports them, but even it has moved its focus to different approaches in v6.
So, with all the Functional Programming (FP) and hook craze going on right now, and the fact that Decorators aren't a stable JS feature yet, Akita might not be your jazz. Maybe that's why it seems to be more focused on Angular (where Decorators are much more common) than it is on React.
But overall, if you like Akita and its API, nothing is stopping you from using it with React. It can pair especially well if you're using class-based components, has great docs, and a decently-sized community.
Hookstate
I saved "the best" for the end.
Hookstate is currently my favorite React state management library, even though it's the least popular in the group. It's small, minimal, clean, extendable, and it has a lovely hook-based API.
This one might be for you, but only if you're - like me - in love with React hooks. Hookstate utilizes them, and a couple of other impressive techniques to deliver great development experience and performance.
Not only can it be used for global state, but can also enhance local useState() with additional features, handle nested state without performance loss, and deal with async data with ease!
All that and more in a small package, with simple but also easy-to-use plugin architecture for even more features.
I highly recommend you check it out!
Don't forget the basics
So, at this point, as we've gone through all these great libraries, I'd like to remind you that you don't necessarily need them.
In contrary to some people's beliefs, a state management library isn't a requirement when using React. In fact, React provides its own tools for that - just the State and Context APIs. Sure, it isn't as convenient to work with, but can get the job done when the project isn't too complex.
So, State and Context API - that's the default. No Redux or even Recoil that's coming directly from Facebook. Only opt-in for an external library when you're 100% sure you're going to need it, or right when it's needed. That's partially why I like Hookstate so much. It provides a lot of additional features with a pleasant API while having the smallest footprint of the bunch. That's the closest I can comfortably get to a "stock React" solution.
Closing thoughts
That's it for this list. Let me know down in the comments what you think about my picks? Maybe you've got some other options to share that I didn't include here? Again, the comment section is yours.
For more web dev lists, tutorials, news, and more follow me on Twitter, Facebook, or through my newsletter. Thanks for reading and happy coding!
If you’re a technical blogger like me, consider checking out CodeWrite — free “code-blogging” tool, which treats your code snippets with proper editing and formatting tools (Monaco Editor & Prettier), works beautifully with Grammarly, and handles cross-posting to Dev.to, Hashnode, Medium, and Ghost blogs, with awesome auto-filling feature (did I mention it’s a browser extension?) which handles all “edge-cases” for you (e.g. converting code in Medium to GitHub Gist, or resizing large images).
Try it for free, and get the premium subscription for only $3/month or $30/year!
Top comments (6)
have you checked Zustand? its also good github.com/pmndrs/zustand
Great article, Arek 👍 Recoil looks really nice, I can't wait until it becomes production-ready! And I agree with you, many projects don't need a state management library, you should consider using it if the project becomes too complex for React alone.
Good ! Thank You
Talking about redux in 2021 and no redux-toolkit? Seriously?
Jotai or hookstate?
Matter of preference I guess. Didn't know about Jotai, but after a quick look, I'm staying with Hookstate for now. Should do a deeper dive before final decision though.