Redux vs. MobX: Which performs better?

Editor’s note: This post was last updated on 29 July 2021. It may still contain information that is out of date.

One of the hardest problems to solve in large frontend applications is state management.

While there are several approaches to solving state management problems, Redux and MobX are two of the most popular external libraries that address state management in frontend applications.

In this post, we will look at each library and how they match up with the following:

• What is Redux?
• What is MobX
• Redux and MobX popularity
• Redux and MobX learning curve
• Storing data with single store vs. multiple stores in Redux and MobX
• Redux and MobX data structure
• Pure vs. impure functions in Redux and MobX
• Redux and MobX boilerplate code
• Redux and MobX developer communities
• Redux and MobX scalability

This article assumes that you have a basic idea of how state management works within your web application. Both Redux and MobX are framework-agnostic and work with any framework or vanilla JavaScript.

What is Redux?

Redux is a popular state management solution that combines Flux and functional programming concepts. Redux’s core principles include the following:

• Redux has a single store, which provides a single source of truth
• The state in the store is immutable
• Actions invoke changes to the store
• Reducers update state

What is MobX?

MobX is a state management solution that helps in managing the local state within your app.

Some of the core principles of MobX include the following:

• MobX can have multiple stores that store the state of an application
• Anything derived from the state without any further interaction is a derivation
• Actions are any piece of code that changes the state
• All derivations update automatically and atomically when the state changes

Now, let’s compare Redux and MobX and some of their key features to see what suits your needs better.

Redux and Mobx popularity

Before beginning your quest to learn Redux or MobX, let’s look at which one is more popular.

Looking at the Google Trends graph below, Redux has maintained a significant advantage in popularity over the past year.

To get more insight into their popularity factors, let’s take a look at the State of JavaScript 2020 survey. It released data on Redux’s and MobX’s popularity over the last four years among developers.

The findings show that 67% of respondents are satisfied with and would use Redux again, while 64% said they are satisfied with and would use MobX again.

The findings begin to widen when looking at the actual usage of the two management solutions: 67% of respondents use Redux while only 13% use MobX.

Beyond interest and usage, the main aspect that sets Redux and Mobx apart is its brand recognition. Redux is not used more, but fewer people even know what MobX is.

Over the last few years, Redux has gained a ton of popularity and has been the go-to solution for state management. According to the State of JavaScript study, has remained the leading solution among other data layer technologies, including Mobx.

Popularity winner

Redux takes the win over MobX for most popular.

Redux and MobX learning curve

The popular opinion that developers have about Redux is that it is not easy to learn. The State of JavaScript survey of 2018, analyzed the most disliked aspects of Redux. Here, developers voted that they don’t like the complex nature of Redux and the hard learning curve that it comes with.

With Redux, it takes some time to understand its patterns and paradigms plus its combination of Flux architecture and functional programming concepts.

For functional programmers, it may be easier to grasp Redux, whereas for someone from an object-oriented programming background, Redux code can initially look complex and hard to understand.

Learning Redux also means you need to learn about Redux middleware like Thunk and Saga, adding more material and time to learn.

On the other hand, MobX is known to be easier to learn compared to Redux. Most JavaScript developers are well versed in object-oriented programming, which makes learning MobX simple.

Also, there are a lot of things that are done behind the scenes in MobX, creating a better learning experience for the developers. You don’t need to worry about normalizing the state or implementing concepts like Thunks, leading to writing less code since the abstraction is already built-in.

Learning curve winner

MobX wins for its easier learning experience.

Storing data with single store vs. multiple stores in Redux and MobX

The store is where we store local data and holds the entire application’s state, typically in a JSON object.

Why does Redux only have one store?

In Redux, there is only one store, and it is the single source of truth. The state in the store is immutable, which makes it easier for us to know where to find the data/state. In Redux, although there is one JSON object that represents the store, we can always split the code into multiple reducers. This way, we can logically separate the concerns with multiple reducers.

This is a more intuitive approach for many developers since they can always refer to the single store for the application’s state, and there is no possibility of duplication or confusion related to the current state of the data.

MobX’s multiple stores

MobX, however, allows multiple stores. You can logically separate stores so all of the application’s state is not in one store. Most applications designs have at least two stores: one for the UI state and one or more for the domain state. The advantage of separating the stores this way allows us to reuse the domain in other applications. And, the UI store would be specific to the current application.

Storing data winner

The winner of this category is subjective; it depends on the developer’s preference. I personally like storing the entire state of an application in a single store. This helps me refer to the same place as the single source of truth. Some may argue that multiple stores work better for them and prefer MobX.

Redux and MobX data structure

Redux uses plain JavaScript objects as data structures to store the state. While using Redux, updates must be tracked manually. This can be harder in applications that have a huge state to maintain.

Contrasting Redux, MobX uses observable data, which helps automatically track changes through implicit subscriptions. In MobX, updates are tracked automatically, therefore making it easier for developers.

Data structure winner

MobX wins for automatically tracking updates.

Pure vs. impure functions in Redux and MobX

In Redux, the state in the store is immutable, meaning all states are read-only. Actions in Redux can invoke changes to state, and the reducers can replace the previous state with a new state. This is one of the core principles of Redux.

A simple example of a pure function is shown below:

function sumOfNumbers(a, b) {
 return a + b;
}

The function always returns the same output given the same input; it has no side effects or influence from the outside world.

Redux functions are written with the following pattern. Reducers are pure functions that take in a state and action and return a new state.

function(state, action) => newState

This makes Redux pure. If you are interested in learning more about pure functions and how they operate in Redux, you can read this article for a better understanding. This is one of Redux’s best features.

In MobX, however, the state is mutable, meaning you can simply update the state with new values. This makes MobX impure. Impure functions are harder to test and maintain since they don’t always return predictable outputs.

Pure vs. impure functions winner

Since the Redux store is pure, it is more predictable and easier to revert state updates. In the case of MobX, if not done right, the state updates can make it harder to debug.

Redux and MobX boilerplate code

One of the biggest complaints about Redux is the amount of boilerplate code that comes with it. And, when you integrate React with Redux, it results in even more boilerplate code. This is because Redux is explicit in nature and a lot of its capabilities must be explicitly coded.

MobX, on the other hand, is more implicit and does not require a lot of special tooling. It comes with much less boilerplate code in comparison to Redux, making MobX easier to learn and set up.

Boilerplate code winner

With its easy setup and learning curve, MobX’s boilerplate code takes the win.

Redux and MobX developer communities

With regards to developer communities, Redux wins hands down. Redux comes with the Redux DevTools that are used by thousands of developers. It offers amazing support for debugging Redux code.

MobX also offers developer tools, but they do not have the same quality of debugging support that Redux provides.

GitHub stats are a good indication of community involvement for both libraries: Redux has about 56k stars, with well over 800 contributors. MobX, on the other hand, has around 24k stars and 260 contributors.

If we look at the downloads from npm, Redux is way ahead. Redux averages five million downloads a week, while MobX averages about 655k downloads a week.

Developer communities winner

Numbers don’t lie: Redux takes the win with adaptability and popularity among the development community.

Redux and MobX scalability

Since Redux is more opinionated and expects pure reducer functions, it is easier to scale than MobX. The opinionated and pure nature of Redux enables its scalability.

Pure functions are easier to test since they are predictable and simple, resulting in maintainable, scalable code. This is one of the core benefits of choosing Redux over MobX.

Scalability winner

Redux comes in with its opinionated and pure nature to cinch the scalability win.

Conclusion

Alright, what’s the verdict? Based on the developer community, popularity, and scalability, Redux performs better than MobX. But if you’re looking to get up to speed quickly and build simple apps with less boilerplate code, MobX might be your best bet.