Frustration-free State Management with React and React Native using MobX

Isn’t it frustrating when you're doing React development there’s a bug somewhere in your hierarchy of state that seems impossible to find? How about when you want to add another team member to join your next multi-million dollar mobile application development project but it takes too much time to explain how it was written? Let’s be honest, no one wants to deal with 1000 lines of code files. Even if that isn’t an issue, you don’t want to constantly write boilerplate code that gets in the way of focusing on more important tasks. All of these frustrations are easily solved using a state management tool like MobX. MobX is straightforward, automatic, and most importantly, provides your project with architectural freedom. Let’s quickly dive in and see what MobX can do. 

What is MobX? 

MobX is a state management tool that focuses on two main ideas. Here are two quotes taken directly from the MobX website.

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

States should be handled automatically in the background so you as a developer can focus on more important features.  

“MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).”

Simplicity as well as the freedom to scale whenever necessary is the key to why MobX is indeed one of the best state management tools. To fully understand exactly what MobX means by “applying functional reactive programming”, let’s go ahead and see what each programming paradigm actually means. 

What are Functional and Reactive Programming? 

To sum it up, functional programming uses functions to solve problems rather than using the imperative approach, which requires a developer to write code that specifies the steps needed. This is expanded more within the video below. Now that we know what exactly functional programming is, let's go ahead and take a look at reactive programming.

Reactive programming basically consists of asynchronous data streams (they happen at different times). These data streams are subscribed to and then triggered via events. In the most basic terms, think of a keystroke or a mouse down/up event. The event will happen only when the key is pressed or the mouse is clicked. 

MobX is built using these two specific programming paradigms. State changes use functional programming. After creating your components, you then apply observers to specific components to be reactive to state change from within a store. Let’s explore why we should even use a state management tool like MobX in the first place. 

Why use a state management tool?

All React components each have their own independent states. A state is a javascript object that stores data dynamically. It allows the component to keep track of any information that has been altered. When a state changes, it will alter the corresponding rendered element. Any change to the data will also change the component. This is how React was built. So why do we even need a state management tool? The reasoning for using a state management tool is so we can have a centralized location for all states. As explained above, all state for each component is managed within the component itself, independent of other components. One thing we do need to keep in mind is that multiple components of the same type of component are considered independent as well. In the video below, we will go into more detail about state management and see how we can implement it within your project.

What are some pros and cons of using MobX?

Pros :

• Separation of statefulness of the app for component rendering. The code is more legible and easier to maintain.  

• It’s also easier for someone else to come into the code itself due to its ease of use!

• A root store. A global store. Or many stores! Easily scalable when you need to make another store!

• Less boilerplate code.

• Most important of all, it's very simple!

Cons : 

• Sometimes simplicity and without strict rules can lead to very unmaintainable code. The increased freedom we have with structure is great, but without strictly enforcing actions to state, it may be just as easy to incorrectly update state.

• Harder to debug as things are done automatically. It may be difficult to pinpoint the source of a bug.

Overall, the simplicity of MobX gives you a lot of freedom thanks to its ease of use, but it may result in problems should it become unmaintainable.                           

Mutability vs Immutability?

What is mutable or immutable data? Mutability is an object whose state can be changed or modified after it's created. Immutability is the direct opposite: unchangeable. React itself is immutable by nature. This leads to the question of the usefulness of other state management tools like Redux.

Redux uses the immutability approach but one thing to keep in mind is, when a change is made on an immutable object, the change must be applied to a copy of that object first, then returned. Redux requires you to specify the action you want to take. It’s then passed through a reducer which will modify the stored object. Again, it creates another object with the new value, then it’s returned. Redux has a lot of boilerplate code as there can be many reducers and actions.

MobX on the other hand uses a mutable approach, reactively using observers to handle any changes to states, instead of doing snapshots of the state. Data and relations are monitored, changed only when needed, then rerendered. 

Conclusion

So you have made it to the conclusion, or TLDR! MobX provides you architectural freedom due to its ease of use, simplicity, and scalability. Using a state management tool like MobX allows you to separate your concerns which in turn allows your development process to become smoother and save time in the long run. 

For those of you who are visual learners, checkout the video on YouTube. Learn how to install and add a Rootstore into your project today!