12 - React state management.
Speck Academy 2021
React state management
Mobx
1
2
Overview
1
React state management
React State Management overview
State
Component state
Context API
State Management Solutions
State
In an application, state is an interface between your data from any kind of backend or local change and the representation of this data with UI elements in the frontend.
State is able to keep data of different components in sync because each state update will re-render all relevant components.
State can be a medium to communicate between different components aswell.
In React there are many different paradigms and libraries to keep your state managed.
Component state
State inside the component
Besides all other state management solutions, the component state is preferred to not be replaced at all because you should always keep your state as close to where it is needed to avoid unnecessary complexity.
Component state
It is totally possible to write your application just with component state, but as your component dependencies and the size and complexity of your app grows, dealing with state will become more complex.
In more complex apps, distance between your state locations and your components could increase.
This leads to props drilling, meaning passing props through components which don’t need the props but their children do.
We need to avoid this because it increases the complexity in development and also in refactoring.
Context API
The Context API provides an internal solution for passing state where it is needed and avoids the possibility of props drilling.
Context API is perfect solution to pass data that is not so complex.
State Management Solutions
As you can see, component state and Context API has their own purpose, and both of the solutions are adequate to some specific use cases.
Context API has a lot of possible use cases, also for more complex situations, but there are also libraries that are made only for more complex cases.
When you need to manage state of applications with higher complexity try to decide between one of the following libraries:
Read more about Redux vs Mobx.
2
Mobx
MobX overview
MobX basics
Core concepts & implementation
MobX basics
MobX is a library that makes state management simple and scalable by applying functional reactive programming.
MobX is using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.
React and MobX together are a powerful combination.
MobX basics
MobX makes impossible to produce an inconsistent state, because everything that can be derived from the application state, will be derived.
MobX basics
State - graphs of objects, arrays, primitives, references that forms the model of your application. These values could be considered as the “data cells” of your app.
Computed values (derivations) - any value that can be computed automatically from the state of your application (simple values like number of unfinished todos, to complex stuff like a visual HTML representation of todos).
Reactions - react to state changes and produce side effect like updating the UI.
Actions - only thing that modify state (invoked by events). MobX will make sure that all changes to the application state caused by actions are automatically processed by all computed values and reactions.
Core concepts & implementation
With MobX we can add observable capabilities to existing data structures like objects, arrays and class instances.
If we are using app created with create-react-app then its easiest way to use decorate function to add decorators to the our store.
Using observable is like turning a property of an object into a spreadsheet cell.
The observable is telling our MobX store what will be state property.
Core concepts & implementation
Another core concept is computed value that defines value that will be derived automatically when relevant data is modified.
For computed values computed decorator must be used and also we need to define it with get keyword in front of computed method.
If we compare observables with the spreadsheet cells, then computed values can be compared with formulas in spreadsheet programs like MS Excel.
Core concepts & implementation
Third main concept is action that is needed to modify our store state.
In order to decorate action, use action decorator.
On the right side you can see example of simple store for storing Events inside events array.
Core concepts & implementation
In the component that we want to use our previously defined store we need to assure that:
3
Hands-on
Hands-on
4
Teamwork
Teamwork