Ditching setState for MobX

How to leverage observables, observers, computed properties, autorun & more to supercharge & simplify your React workflow.

In late 2017 I worked on a React Native project with a team that had used MobX as their state management library.

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:

// .babelrc
{
  // omitting pre-existing configuration
  "plugins": [
    "transform-decorators-legacy"
  ]
}