Top 5 React state management libraries in early 2021
Tags: webdev, react, javascript, typescript
Published: 2021-04-05 18:38:59

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](https://redux.js.org/)**
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ok14hg2enoibkilmfc2.png" alt="Redux landing page"/>
<figcaption>Redux landing page</figcaption>
</figure>
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](https://bundlephobia.com/result?p=@reduxjs/toolkit), **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](https://mobx.js.org/README.html)**
<figure>
<img src="https://areknawo.com/content/images/size/w1600/2020/11/mobx.png" alt="MobX landing page"/>
<figcaption>MobX landing page</figcaption>
</figure>
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](https://bundlephobia.com/result?p=mobx), 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](https://recoiljs.org/)**
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj0jjef7juj9inun5t6z.png" alt="Recoil landing page"/>
<figcaption>Recoil landing page</figcaption>
</figure>
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](https://www.reddit.com/r/reactjs/comments/i3asfg/is_recoil_production_ready/?utm_source=share&utm_medium=web2x&context=3) 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](https://github.com/facebookexperimental/Recoil) to it) to see how things turn out.

# **[Akita](https://datorama.github.io/akita/)**
<figure>
<img src="https://areknawo.com/content/images/size/w1600/2020/11/akita.png" alt="Akita landing page"/>
<figcaption>Akita landing page</figcaption>
</figure>
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](https://mobx.js.org/enabling-decorators.html), 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](https://hookstate.js.org/)**
<figure>
<img src="https://areknawo.com/content/images/size/w1600/2020/11/hookstate.png" alt="Hookstate landing page"/>
<figcaption>Hookstate landing page</figcaption>
</figure>
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](https://bundlephobia.com/result?p=@hookstate/core)**, 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](https://reactjs.org/docs/state-and-lifecycle.html) and [Context](https://reactjs.org/docs/context.html) 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](https://twitter.com/areknawo), [Facebook](https://facebook.com/areknawoblog), or through [my newsletter](https://areknawo.com#newsletter). Thanks for reading and happy coding!

> If you’re a technical blogger like me, consider checking out **[CodeWrite](https://codewrite.io/)** — 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](http://dev.to/), [Hashnode](https://hashnode.com/), [Medium](https://medium.com/), and **[Ghost blogs](https://ghost.org/)**, 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**!