mobx-state-tree VS MobX

Basic knowledge of Tailwind CSS and MobX-State-Tree

Folks disagreed with my comment yesterday criticizing Redux as an architecture, but this sort of illustrates my point. I'd suggest taking a look at Mobx State Tree, which automatically re-renders components only when they depend on the specific part of the state that changed. Other fields can change without triggering unnecessary re-renders, and developers don't have to worry about manually splitting the state to deal with performance problems.

mobx-state-tree (https://mobx-state-tree.js.org/)

Benefits of it over mobx is data normalization with references and JSON patches which allow you sync complex state easily. Typed models are also a plus.

Drawbacks are performance (see https://github.com/mobxjs/mobx-state-tree/issues/1267).

Previously was using immer, which I loved because of immutability but moved off since classes and OOP didn't feel as natural as in mst.

If I were to pick an alternative, might try redux with normalization https://redux.js.org/usage/structuring-reducers/normalizing-....

And if I were to build a state management tool, I would prioritize a library that has

MobX - or even MobX-state-tree if you prefer

As for state imba doesn't impose any paradigm on you - you are free to bring your own state managment. So you could use a library like mobx-state-tree.

We have covered almost all required topics from MobeX-State-Tree. MobeX provided few sample example, download ToDoMVC - app using React and MST and Bookshop - app with references, identifiers, routing, testing etc.

MobX-State-Tree -> MobX is a state management "engine", and MobX-State-Tree gives it structure and common tools you need for your app.

Recoil is cool, I would also recommend mobx-state-tree which is not much more complex to use and gives you nice type safety and reactivity. You can easily get a snapshot of the whole store and restore from it.

States can also be organized in some central places (aka. stores). You can use Tini Store (very simple, ~50 lines) or other state management solutions such as MobX, TinyX, ...

Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could emerge, based on that experience. Several framework authors are collaborating here on a common model which could back their reactivity core. The current draft is based on design input from the authors/maintainers of Angular, Bubble, Ember, FAST, MobX, Preact, Qwik, RxJS, Solid, Starbeam, Svelte, Vue, Wiz, and more…

MobX

Mutable-based: leverages proxy to create mutable data sources which can be directly written to or reactively read from. Candidates in this group are MobX and Valtio.

Looks good! FWIW I always felt the observable pattern much more intuitive than the redux/reducer style. Something like https://mobx.js.org/

Things get hairy in both, but redux pattern feels so ridiculously ceremonially to effectively manage a huge global state object with a false sense of "purity".

Observables otoh say "fuck it, I'm mutating everything, do what you want with it".

MobX Documentation

There's also others libraries like https://github.com/mobxjs/mobx which aren't specific to RN but can be used in any JS environment.

Valtio is like simplified MobX

Link: https://mobx.js.org