We all know that React is an awesome technology that allows us to build rich user interfaces. Then we reach a point where our application is full of nested components that have a weird way of communicating with each other. Each new business requirement makes this relationship even more complex.

This is where state management tools come in quite handy. The question is how do we add such a library in our application without having to do a massive amount of work to achieve that? This is were Mobx comes in place.

It was quite common for our pages to have 10+ levels of components and in most cases there were values passed from the top to the very bottom. That made debugging very difficult. What was needed was something lightweight. This is were I come through Mobx.

I was quite impressed with its simplicity. When thinking of state management I think of Redux where just trying to add it to your application is a few days of work at least. With Mobx all you need is a store that will hold the data and a few getters and setters to play around with them.

In the following video I talk about Mobx in more detail with some examples.

https://www.youtube.com/watch?v=0DPATD3yi6k

If you want to see the source code of the project that I used in the video, you can check it here: https://github.com/harrisgeo88/my-travel-map