MobX in React — learn the basics [Video Demonstration]

MobX and React are often used together to efficiently create component-based web applications. The process of integrating them can seem challenging at the beginning. This is why we have  prepared a comprehensive video guide for those who want to use MobX in React.

What is React? 

Also known as React.js or ReactJS, React is an open source, JavaScript library that provides an output for data presented in HTML. The views of React are generally extracted through the deployment of “components.” These components can consist of additional components, which are specified in terms of custom HTML tags. React helps with timely and efficient updates of the HTML file when data is changed. 

React features include: 

• Components - Make up React’s code. They can be rendered to a specific element in the DOM. 
• Virtual DOM (Virtual Document Object Model) - Handles reconciliation. In this process, an in-memory data-structure cache is created. After that, the resulting differences are computed, and finally, the browser's DOM is updated. In other words, React renders only subcomponents that actually change. 
• React hooks - These are functions that "hook into" state and lifecycle features from function components. What’s more, they can be used without class components. 

This library is often used in web development, and it is recommended for building user interfaces. 

What is MobX?

This state-management library simplifies the connection of your reactive data from the application with the UI. This means, that as a MobX user, you only have a focus on those reactive data which have to be consumed by the observer. That is because the integration is automatic and you don’t have to worry about keeping them synchronized.

Other MobX features include: 

• MobX is described as simple  - In most cases, a minimal amount of code will be enough. If you need to update data in an asynchronous process, the reactivity system manages the process itself, without any special tools. 
• Optimal rendering - A dependency tree is created thanks to that data and changes are tracked at runtime. The tree contains relations between state and output. Manually optimized components or selectors aren’t necessary - computations depending on your state (e.g. React components) are run only when needed. 
• No architectural boundaries - This means you can manage your application state outside of any UI framework. Thanks to that, the code is decoupled and easily portable and testable. 

MobX is inspired by MVVM frameworks like Vue.js, MeteorJS tracker, and knockout. It efficiently implements Transparent Functional Reactive Programming (TFRP) so it is glitch-free, synchronous, and predictable. 

If you are interested in reading up on how MobX and React work together, have a look at our case study - we created a UI portal facilitating data center operators’ work for our client, who offers a platform for operational intelligence of digital infrastructures. 

How does MobX work? 

The following terms will help you better understand MobX: 

1. Application state - Everything that forms a model of the application, like graphs of objects, arrays, primitives, and references make up the “data cell” of the application. 
2. Derivations - Values that can be automatically computed from the state. It could be simply the number of unfinished to-dos, or complex stuff like a visual HTML representation of your to-dos.
3. Actions - Functions that modify the state. 
4. Reactions - Side effects of the observed value change. These can be a triggering of a request based on a new state value. 

If you’re still struggling to visualize MobX, you can think about it as a tool that treats the app like a spreadsheet. Of course, our video will take a much deeper dive into everything you need to know.

How to integrate MobX with React? - demo video 

With the above theory behind us, we can now get to the practical side of things.To that end, we've prepared a complex demo video, where we explain how to integrate MobX and React. 

It also contains instructions for what to do if:

• your component isn't re-rendering,
• you forget the observer,
• and what you should be aware of during integration.

For all this (and more) you can find the answers in the video below:

Are you looking for solutions expediting work in dynamic environment? Check our blog post about three software development metrics for a startup.

Conclusion 

We hope you found our video about how MobX can be integrated with React components interesting and useful. If you’d like to watch more in-depth technology videos, you will find them on our YouTube Channel      .