Posted: - Updated:

Introduction to Mobx with React

Categories Code, JavaScript, React
Introduction to MobX with React

MobX has slowly built itself up as Redux’s main competition for state management real-estate. Which is definitely not a coincidence. Because, not only is MobX incredibly easy to use; it’s also very powerful. And, believe me when I say this: I’ve never seen React perform any better than when I mix the two of them. But, instead of me telling you, why don’t I show you instead?

A little bit of History: I’ve been working with Redux since version 1.0.0 came out. I was one of the early adopters at my previous company, gave courses on it, and tried to evangelize everyone to my cause. Pretty standard stuff.

Which means that, by the time I found out about MobX, I was already pretty familiar with the competition. Making me change sides was going to be no easy task.

And that’s when I ran into this video by Matt Ruby:

But, since it’s 42 minutes long, I’ll summarize it for you: Mixing MobX and React is like giving your car a consistent Nitro Boost while also reducing its fuel consumption by 90%.

What do I mean by this? The combination literally reduces the number of updates and (by extension) rendering to the bare minimum. Which brings your application to the peak of its performance.

If that doesn’t convince you to give this combo meal a try, nothing will. But, if being super fast is something that interests you, then boy do I have a treat for you next.

Author’s Note: I don’t mean to say that MobX is the superior option. Redux has most of the market share because of how easy it is to structure a project around it. Which is no small feat: Redux WILL bring order to any project you implement it in. And choosing the better one of the two is beyond the scope of this post. Instead, I recommend this article for an in-depth discussion about the differences between MobX and Redux.

Let’s talk about MobX.

MobX is a state management solution. Which basically means that it’s used to keep track of all the moving parts of your application.

Now, considering state management is a pretty popular sub-genre of framework these days, what did MobX do to get ahead of the curve?

And the answer to that is, well, a lot of things:

  • MobX appeals to a larger subset of programmers by being based in OOP.
  • It is very lightweight, allowing for easy integration.
  • Because it is very lightweight, it is easy to justify “Building just this one section” using MobX.
  • And thus adopting it causes very little friction.

You also only need to grasp four core concepts to understand MobX: observable state, computations, actions and reactions.

  • Observable State: Pieces of application state. Their changes trigger reactions and computations.
  • Computations: Values derived from observable state. They update only when necessary.
  • Actions: Any external modification to the observable state, including user intervention.
  • Reactions: Side effects triggered by a change in observable state.

Which, of course, feed into the main idea behind the framework:

Anything that can be derived from the application state, should be derived. Automatically.

Of course there’s more to learn, we’re only scratching the surface here. But you really don’t need to know all that much more to start using MobX. And that’s definitely part of the beauty.

The simplicity of these concepts, alongside the OOP base, make MobX incredibly straight forward to learn. And such a small learning curve really helps when jumping on board with a new project.

Why use MobX with React?

ReactJS is a front end component library for rendering user interfaces. Which has quickly taken over the entire internet. It’s so popular, in fact, that they already teach it at my college in Mexico.

The beauty of the framework comes in the way that it reacts (haha) to changes in state. As explained in one of my previous posts: React’s reconciliation algorithm will trigger updates based on state changes. And it will do so in very smart, and minimal, ways for increased performance.

This quality means React is the perfect choice for handling side effects in our MobX applications.

I already mentioned during the introduction how MobX won me over with its efficiency. Reducing the number of updates to a bare minimum is simply pretty tough to beat. 

Such power is achieved by combining skills from each framework:

  • React updates the bare minimum UI based on state changes.
  • MobX only changes the observable state when absolutely necessary.

Which naturally results in very fast and efficient User Interfaces.

And, of course, this is not the only reason for which to use them together. We could always talk about the advantages of using MobX over Component state. But that’s a topic for another blogger.

What do you need to work with MobX and React?

I really want to leave this post as an introduction to the topic, allowing me to focus fully on a proper tutorial next week. However, that does not mean I am about to leave without imparting some knowledge.

Now you know a little bit about MobX, and some of the advantages of using it with a framework such as React. Which means that the next logical step is to give you a set of tools to start practicing right away.

We really only need one file to work with MobX:

<script src="https://unpkg.com/mobx@3.1.2/lib/mobx.umd.min.js"></script>

And to this we can add the files necessary to run React:

<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>

Plus our ES6+ compiler:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Which leaves us with just one last file to bring everything together, a way to mix MobX and React:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/3.4.0/index.js"></script>

You should be able to add all of these tags to an html file and begin coding.

However, I find that such a thing is easier said than done. And, me trying to explain how to set everything up may not lead to the best results. Even more so, steps that I consider too obvious to include, may very well not be so at all. It would be much better if we had a common ground to start at.

So, considering all of those reasons I prepared a couple more presents to get you started on your new MobX with React journey:

  • Ready To Go MobX + React Template on Codepen. Everything you need to get started is inside it.
  • Mobx-react-starter on GitHub. It has a more recent version of all libraries. It also contains testing, lint and support for your favorite ES6+ features (decorators anyone?)

So feel free to get your copy of either and start doing some good old coding.

Moving forward.

For a quick recount on this article:

  • We went over MobX’s main concepts.
  • Discussed a few advantages of coupling it with react.
  • Listed the requirements to work with both frameworks.
  • And prepared a couple starter packs to get us going.

So the question would be, where do we go from here? Well, obviously the next step forward is to actually build something with our new tools. And I just so happen to be working on a little tutorial to achieve that.

So tune in next week (or here if it’s been long enough) and let’s go over your first MobX + React Application.

My name’s Orlando Paredes Hamsho. I’m a 25-year-old Web Developer living (mostly) in Guadalajara, Mexico; albeit I intend to move pretty soon. Apparently, I also run a blog now, and have been doing so for a while.

3 thoughts on “Introduction to Mobx with React

Leave a Reply

Your email address will not be published. Required fields are marked *