Approaches to data processing and manipulation remain one of the key aspects of software development.
Immunability, reactivity, and mutability are key strategies in data state management, and choosing between them can significantly affect application performance.,
And what about the mutable approach? For example - MobX. This library is regarded by many as an analogue of Redux, but from the camp of a mutable approach. However, you can often hear that Redux has more performance than MobX, which contradicts what we talked about. After all, in a mutable approach, we simply change the value in memory.
For example, I wrote 2 versions of a simple React application. One using Redux, the other with MobX. In all other respects, they are completely identical. The application is a background counter that is updated 1 time per second. A button that changes color by hover. And a simulation of sending N files to the server. When sending information changes, it should be updated in the interface. Sending occurs asynchronously and starts at different times for everyone, with random file size. This application lacks a complex interface and so on, but it demonstrates well the user's need to use the application while something is being done in the background (I will provide access to each application at the end of the article).
Here is the result when sending 50 files.
There are no differences in performance here. The main counter changes 1 time per second. The color change and text highlighting are triggered. Updating information is not lagging.
When sending 100 files, the lags are already noticeable.
When sending 500 files, the application can no longer be used and it makes no sense to test with a larger number of files.
If you look to measure the execution time of the update function, it turns out that Redux is really faster than MobX. But with the increase in the number of files, this difference is greatly reduced.
It turns out that mutability is no faster than immunability? What is the point of realizing that an application with MobX works faster than the same application with Redux, if both of them cannot be used?
In fact, MobX has tried to combine reactivity and mutability and performs too many calculations for this. In MobX, a state change can cause side effects in other parts of the application through mechanisms such as observables and reactions. This means that when a state changes (mutates), all parts of the system that depend on this state automatically react to these changes. In addition, the
Then how to make it better? How to make sure that our application does not lag, and we can send 500 files without harm?
And the problem is a safe state with a clear data flow.
Proxy is used to define user behaviors on objects and allows you to create various types of traps for objects. But MobX uses a
Proxy! Yes, but with reservations. Let's just say
Proxy is used there more for other things than for state control.
Libraries for state management are often regarded as a place where you need to shove all the business logic. From this, the vector of the library's purpose shifts from the original one - state management.
Before proceeding to the details of what should be taken into account in the state management library in the first place, let's look at another example of an application we know, but with a different library. Statemanjs.
Even 1000 files without lags.
And only when sending 5000 files there are lags, and then because of React. Nevertheless, even with lags, the application can still be used, unlike Redux and MobX when sending 500 files.
Is this some kind of lite version of MobX? So it's even less secure and functional?
This is not a lite version of MobX and with MobX, statemanjs - binds only
Proxy is used here in a radically different way. More native to the language itself. Providing monitoring and security of the condition.
Statemanjs uses the concept of references for reading, and you can change the state only with built-in methods. This makes it predictable, secure and, as we have seen, faster.
I will not talk in detail about statemanjs. You can read the official documentation - Link, there are also benchmarks and comparison with other state management libraries. In this article, I wanted to draw your attention to how important it is to understand the design of the development environment. Data structures and data modification methods.
Thank you all and have a good coding!