Why use MobX for State Management?

Source: MobX

MobX treats any change to the state as a derivative, like in the case of spreadsheets, where you can apply a formula for a particular column and the column values will change accordingly. The same thing happens in MobX. The change in state is reflected as a derivative, based on the derivative, reactions are generated, which are then trickled down to the component tree. So each change is reflected automatically across all the components. This is intuitive and removes a lot of overhead processes which plague Redux.

Reactive programming is at the core of MobX. It uses concepts similar to RxJS. Values can be made observable so that when the value changes, anything that uses that value will update automatically. This is a pretty simple to grasp the concept that can make working with data much more intuitive.

It has the potential to become not just a State management tool, but according to the creator of MobX, a ‘Data Flow tool’. Code can be expressed more concisely with the new JavaScript decorator syntax although create-react-app doesn’t support this syntax out of the box. MobX is suitable for different Front-end frameworks like Angular which improves its interoperability feature. The additional advantage is not having to go through the laborious set-up an installation and multi-component update process in Redux.

MobX is not however without its limitations. Testing is still a matter of concern. It’s not immediately obvious how components should be broken up for testing. It is a bit easier without using the decorator syntax to separate the logic from the view, however, the documentation doesn’t touch on how this works when using the decorator syntax.

The advantages and ease of use of MobX outweigh the negatives presently. As long as React component structure and Reactive programming paradigm remain as the foundation for modern day web development, Mobx usage will grow, and we might even see other similar libraries cropping up to tackle the issue of state management.

Is Future-Fetcher/Context API replacing Redux?

Why do React developers love Redux for state management?

Creating Reusable Generic Modals in React and Redux