The list of state management solutions, approaches, systems, and libraries worth applying is getting longer but the Redux vs MobX opposition is definitely one of the most vital and interesting to track.
Which one of them do software developers prefer? Which offers greater possibilities in particular use cases? And what sets Redux and MobX apart from their competitors and from each other? What makes these libraries special and in what terms are they similar or alike? Let’s see.
What is Redux?
Redux, sometimes also referred to as Redux code, is an open-source JavaScript library that advertises itself as „a predictable state container for JS apps” that’s centralized, debuggable, and flexible. In detail, it is meant to help to write applications that behave consistently and are easy to test, and supposed to work with any UI layer, offering a large selection of addons.
As The State of JavaScript 2018 survey revealed, the features that software developers who used Redux didn’t like about it were, among other things:
- „clumsy programming style”,
- being „bloated and complex”,
- „hard learning curve”.
What is MobX?
What is MobX, then? Well, it distinguishes itself as a „battle-tested library” that enables simple and scalable state management, and effortless optimal rendering, as well as writing code that is minimalistic, and boilerplate free. It is meant to give software developers architectural freedom with code being decoupled, portable, and easy to test. Interestingly, MobX can follow the Flux framework Redux relies upon, too.
What sets Redux and MobX state management libraries apart – key differences
MobX state management library is written mainly in JavaScript while Redux has originally been written in ES6. In the case of MobX, the state of an application can be stored in multiple stores (as MobX is based on reactive programming) while Redux, relying upon functional programming concepts, only has one store. Interestingly, MobX is much better to use when TypeScript is involved in the project.
Moreover, MobX’s speed is higher when it is used in a regular way, but Redux is faster when properly optimized. Some say that MobX is faster and it’s easier to develop applications that are swift enough utilizing it as it is than to spend a lot of time optimizing Redux to get applications that are only slightly faster.
What’s in the core of Redux are also functional programming principles, while MobX is based on transparent functional reactive programming. For this reason and because of the various paradigms these approaches rely upon, Redux is more demanding and difficult to master while MobX is simply easier to learn.
| Redux | MobX |
| Originally written in ES6 | Written mainly in JavaScript |
| Only one store for app state storing | Multiple stores for app state storing |
| Faster than MobX when properly optimized | Faster than Redux without optimization |
| Based on functional programming concepts | Based on reactive programming concepts |
| More difficult to learn | Easier to learn |
Mobx vs Redux– the most important similarities
Although Redux and MobX are often associated with ReactJS, they aren’t only about React state management, as both Redux and MobX go well with a number of other libraries (including Angular and Vue).
Of course, they have much more in common.
Both MobX and Redux have their own development tools. Redux provides an extensive toolkit that comes with amazing documentation, covers many use cases and examples that are very useful in a software developer’s day-to-day job, and helps developers to simplify the code of their applications„let the user simplify their application code”. The tools provided enable, for instance, easier and efficient debugging (which, by the way, may be more problematic and unpredictable in the case of MobX).
It’s worth mentioning that both parts of the MobX Redux combo are used for monitoring state on the frontend, specifically in JavaScript applications. Another obvious feature they both share is that these versatile libraries are external. On top of that, they were both initially released in the year 2015.
In short, some of the key Redux & MobX similarities are:
- Both Redux and MobX are suitable not only for React state management but also work well with a number of other libraries, such as Angular and Vue.
- Both Redux and MobX are used for monitoring state on the frontend, especially in JS apps.
- Both Redux and MobX are external libraries.
- Both MobX and Redux have their own development tools.
- Both Redux and MobX were released in 2015.
In the Redux MobX combo, it’s hard to point a finger at the winner but certainly, there are some use cases or circumstances when one is better than the other. If we compare Redux to MobX, it’s easy to conclude that, in general, Redux and MobX enjoy similar satisfaction of use but both of those state management solutions are less and less popular among software developers.
MobX vs Redux: a few tips on how to choose right
Choosing the right state management solution is crucial for JavaScript developers as it may tip the scales in terms of development time and speed of user interfaces of front-end applications. Also, as state management constitutes a huge part of React, it’s good to know the highlights and downsides of at least a few approaches to choose right.
In short, MobX’s performance, as well as efficiency, may be regarded as better than the one of Redux. If you’re developing a basic application that needs to be delivered soon, MobX may be a better choice to make than Redux that requires more code and time to write. However, although MobX may be easier to start with, it can be harder to master, some software developers argue.
Moreover, building user interfaces with Redux is advantageous when considerable data changes as time goes by. Accordingly, Redux is useful in the case of applications that are very complex, large, or scalable while MobX may be sufficient for those that are more simple or smaller.
Redux vs MobX – which one is more popular?
And now, let’s have a look at some brilliant statistics provided by the State of JavaScript 2020 survey.
- It shows that, as of 2020, almost all developers surveyed (97%) heard of Redux, while only 6 in 10 (62%) were even aware of MobX’s existence. When it comes to usage ratio, Redux was ahead of MobX, too, with 67% and only 13%, respectively. Interestingly, the satisfaction ratio was similar in both cases, accounting for 67% for Redux and 64% as far as MobX is concerned.
- And as for interest, the same survey revealed that, still, in the year 2020, more software developers wanted to learn Redux (55%) than MobX (44%) but the willingness to learn any of them decreased significantly over the recent years.
- Not that long ago, in 2016, as many as 81% of developers surveyed wanted to get to know Redux, and 62% - MobX. In turn, as of 2020, more programmers were willing to learn technologies such as GraphQL (87%), Apollo Client (75%), and Xstate (60%) than MobX or Redux.
Anyway, as Redux is still much more popular than MobX, it's easier to find some relevant examples over the web when trying to tackle particular issues. MobX, in turn, offers updates tracked automatically – contrary to Redux where this has to be done manually.
Also, Redux takes the lead in the Pure vs. impure functions category with reducers as pure functions, the latter sometimes being listed among Redux’s best features.
And you, which technology do you prefer – Redux or MobX? What kind of projects would you recommend them for? What advantages and disadvantages of utilizing them can you spot?
