The most downloaded Front-end framework in 2017 was React.js. The reason being the component driven architecture and easy to implement Reactive programming principles in applications. However, one of the key challenges faced by the developers is state management for large-scale applications. The ‘Setstate’ facility in React can be a workaround for small level applications, but as the complexity of the application grows, so does the importance of managing application state.
That’s where MobX solves a lot of problems faced by the React developers. It’s easy to use and lightweight. MobX features a robust spreadsheet like architecture as shown below.
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.
Read Next
Is Future-Fetcher/Context API replacing Redux?
