MobX in React – Scalable State Management

MobX in React – using the MobX library in React-based applications – was the first part of our tech talk in which our principal frontend engineer covered the basics. This first video covered topics like what MobX is, how it works, how to use it outside React, and how MobX can be integrated with React components.

The next episode focuses on reviewing types of states in Single Page Application (SPA), how to scale SPA using dependency injection with the react-ioc library and what benefits it offers, and points out the areas for MobX.  Everything to provide you with knowledge about the best state management for React, and scalable state management in MobX. 

What is a state in React.js? 

A state is a built-in object used by React to store internal component data. It is managed in the component like any variable declared in a function. A state can change over time and then the component re-renders. A change is a response to a user action or a system-generated event. Changes define the component's behavior and its rendering. 

If you want to learn more about MobX and React, you can read the above-mentioned previous article introducing the first part of MobX in the React series. 

What are the types of states in SPA? 

From the video guide, you can learn more about the types of states in SPA. The first described group are types divided by the source such as Client, Server, Location, and Storage. Next, there are states divided by usage in React.

The types of states in React consist of: 

• Local state (useRef, useState, useReducer),
• Lifted state (props drilling, React Context),
• Global state (Redux), 
• Derived state (Redux selectors, useMemo), 
• Prop state, 
• Form state (formik, React Hook Form). 

Besides highlighting the types of state, by watching the video, you can learn more about which of the above states are issues for MobX. 

MobX state management  

A small spoiler – more air time is given to the Local, Lifted, and Global states and how to implement them using MobX. Our frontend engineer shares his opinion and presents a possible solution to solve issues connected with the described states.
One of these is dependency injection to MobX stores and React components. The dependency injection process with the react-ioc library helps scale SPA, but this is not the only benefit it offers. 

However, we will not say another word – for all the tips and tricks watch the video, linked below. 

Conclusion 

After watching the guide, we hope you find the recommendations valuable and helpful for improving scalable state management in React using the MobX library. 

There are two more reasons to watch the video, if you are still hesitating. The video includes not only knowledge, but also a practical demo, and you can run the project from the presentation on our presenter’s GitHub.  

If you’d like to watch more in-depth technology videos, check out our YouTube channel.