What is MobX?

Web application developers are often looking for effective ways of managing state in their applications. State management is an essential part of developing JavaScript (JS) applications, especially React and React Native applications. MobX is one of the many tools available to React developers for state management.

State management in web applications refers to managing the state of one or more user interface (UI) controls such as text fields, OK buttons, radio buttons, etc., in a graphical user interface (GUI). In this UI programming technique, one control state depends on the state of other UI controls.

We are going to look at what MobX is, what it does, and how it works.

What is MobX?

MobX is a battle-tested library that makes application state management simple and scalable by transparently applying functional reactive programming. Its tried and true open-source standalone library makes it easy to write simple code connecting the reactive data of your application to the user interface. MobX makes it simple to connect the reactive data of your application with the UI.

One of the most compelling features of MobX is that it follows functional reactive programming (FRP) implementation and blocks inconsistent states by ensuring that all derivations get performed automatically. While it does not require any framework or front-end library to work, there are implementations in popular front-end JavaScript frameworks like React, Vue, and Angular. 

Our focus will be on the React implementation of MobX.

What is MobX in ReactJS?

The duo of MobX and React is powerful for developers. React renders the app states by providing tools to translate it into a tree of renderable elements. MobX provides the means to store and update the app states that React then uses.

Both React and MobX give very optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI using a virtual document object model (DOM) that reduces costly DOM mutations. MobX offers tools to effectively synchronize the application states with your React components using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.

The documentation for MobX notes that it conceptually treats your application like a spreadsheet. Using MobX and React, an application developer uses the core concepts of application states, derivations, reactions, and actions.

Application State

With the application state, the graphs of objects, arrays, primitives, and references form the model of your application. For example, in the spreadsheet theme, these values would be your data cells.

Derivations

Derivations are any value that can be computed automatically from the state of your application. These calculated values can range from simple values, like the number of unfinished todos on a list, to complex values, like a visual HTML representation of your todos. These parts of your application are the formulas and charts of a spreadsheet.

Reactions

Reactions are similar to derivations, with the main difference being that these functions don't produce a value. Instead, they run automatically to perform some task, usually related to input and output (I/O). For example, reactions ensure the DOM is updated, or network requests are made automatically at the right time.

Actions

Finally, actions are all things that alter the state. MobX ensures that all derivations and reactions automatically process changes to the application state caused by your actions synchronously and glitch-free.

React MobX Example

Here is what the code looks like using MobX to build a simple timer.

• This example from MobX shows an observer wrapper around the TimerView React component. 
• The wrapper will automatically identify that rendering depends on the timer.secondsPassed observable (forms the reactive state of your MobX app), even though this correlation is not explicitly defined.
• The reactivity system will re-render the component when the precisely that field gets updated in the future.
• Every onClick or setInterval event invokes an action, likemyTimer.increase or myTimer.reset, which updates the observable state (myTimer.secondsPassed).
• The observable state changes get propagated precisely to all computations and side effects, like TimerView, that depend on the changes.

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Model the application state.
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a user interface that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

Conclusion

MobX is a powerful state management tool for web application development. With the ability to write simple code that connects the reactive data of apps to the user interface, developers can create compelling web applications.

Whether you are already familiar with MobX or just trying it out, Liquid Web has many managed hosting options to choose from for your applications. Contact our sales team today to get started.