Why do I think MobX is not right for React

Redux and MobX are the mainstream approaches for React project state management. However, COMPARED with Redux, I think MobX is not suitable for React.

Invasive writing

MobX uses decorators such as @Observer and @Action in the React component, which makes it difficult for people with only React knowledge to understand any of the components. In Redux, the components before Connect are all about React itself. You can be confident that you can understand this part of the code without knowing Redux.

Intuitively, the React code in Redux is very similar to the React official documentation sample code, while the MobX code is quite different.

The State variable

React only State (or Context) changes cause interface updates. In setState, new states are used to replace old states, so in effect, states are considered read-only and should not be changed directly.

Redux follows this philosophy, returning the new State in the Reducer as well, and carefully avoiding modifying the prevState.

MobX does not comply, and its State update is implemented by direct modification. Since MobX uses “reactive” data in State, any changes will be sensed by MobX and notified to React, which also achieves consistency between data and interface.

This is a matter of technical selection preference, Immutable data versus Mutable data. There are no pros and cons, but Redux is more “follow React”.

Reactive and functional

MobX and Redux have distinct characteristics that illustrate the difference between reactive and functional concerns:

Reactive “simple dependability”, where a state changes and any references to that state are automatically updated.

The function “no pair is predictable”, the same input, must get the same output.

The two are not contradictory and can even coexist, which is why MobX calls itself transparent functional Responsive programming (TFRP). React doesn’t want to be reactive, though it’s called React.

There is an internal joke in the team that React should have been called “Schedule” because React does not want to be fully “reactive”.

So, I don’t think MobX is a good fit for React. In the React/MobX project, React only plays a rendering role and becomes a DSL for HTML, so it looks like “React + MobX === Vue”. This is something our haughty React players will never accept 🤣.