I had worked quite a bit with MobX in the past, but this team took it to another level, & I have to say not only did I like their approach but I learned quite a bit by working on the project & with the new team.

One of the big things that was different for me was that they had entirely done away with setState to manage local state and were instead using MobX not only to manage external state, but also local state.

They were not just using observables & observers, but were also using computed properties, autorun, & all that the framework has to offer.

This workflow brought a lot of power & benefit to the project, which we will outline in this post.

To use MobX in a React or React Native environment you must install a couple of dependencies: mobx, mobx-react, & babel-plugin-transform-decorators-legacy. You must also add the babel plugin to your .babelrc plugins configuration:

Usage in a React class:

When

When will watch for a declaration to return true, and when it returns true it will run a function.

when(predicate: () => boolean, effect?: () => void, options?)

You could think of it as a reactive if this then that that & will watch when the predicate returns true to then run a given function.

From the docs: observes & runs the given predicate until it returns true. Once that happens, the given effectis executed and the autorunner is disposed. The function returns a disposer to cancel the autorunner prematurely.

Let’s look at an example that may work good in a game. For example, you want to show some type of message or do some sort of thing once a value gets to a certain number. In our example, we’ll wait for the score to reach 5 and when it does we’ll show a message to the user:

Usage in a React class:

We create two observable values, score & showWin.

We create a when function in the class.

When score reaches 5, the second function is fired and the showWin Boolean is set to true

Autorun

autorun is a way to call function when a computed value has changed.

From the docs: can be used in those cases where you want to create a reactive function that will never have observers itself. This is usually the case when you need to bridge from reactive to imperative code, for example for logging, persistence, or UI-updating code. When autorun is used, the provided function will always be triggered once immediately and then again each time one of its dependencies changes.

Usage in a React class:

In this example, whenever the name property of the class changes, the autorun function will be called.

Import autorun from MobX.

Create an autorun function that will run whenever the name value is changed, logging out a message with the new name

Benefits

Michel Weststrate, the author of MobX, wrote an article outlining why he has also adopted this technique. This article articulated why you would replace setState with MobX with a few good reasons & explanation around those reasons.

More powerful

In addition to replacing setState, you are also getting all of the functionality that MobX has to offer and adding it to your React workflow directly in your React classes.

Conclusion

Reactive programming is extremely powerful and fun, but a lot of the current entry points such as RxJS are notoriously hard to get into for programmers new to the paradigm.

MobX offers not only an extremely intuitive entry and approach to Reactive programming but also what is in my opinion the best approach currently available for React developers, and with mobx-react it is a dream come true for React developers.

I truly think that by adopting this technique you may never need to use setState again by combining the best of what both React & MobX have to offer.

To learn more about not only MobX, but all of the state management techniques available right now in the React ecosystem check out this article by Gant Laborde.