Our great sponsors
-
speaker.app
Discontinued Speaker.app (https://speaker.app) is an encrypted peer-to-peer (P2P) group communication platform which does not require a user account to use. Users remain anonymous on the network unless choosing to personally identify themselves.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
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
I prefer sticking w/ the basics and using EventEmitter.
https://speaker.app has a UI I've been prototyping w/ this approach.
Thanks for sharing this, I found this paradigm to be highly intuitive. Adding a link to the HTMX docs which also do a great job of explaining: https://htmx.org/
Jotai [1] is my go to, though I have never used it for anything too big.
[1] https://jotai.org/
I like valtio, works w/ React or just js. Has subscribe, derive, and more.
https://github.com/pmndrs/valtio
Actually, Svelte uses Effector for state management under the hood. You can read more about it here: https://effector.dev/. It also has bindings for other frameworks including React, Vue and Solid. Effector is a little not beginner-friendly, but once you truly understand it, Effector becomes a very powerful.
Zustand is great: https://github.com/pmndrs/zustand
It gets out of the way in terms of boilerplate, has a good solution for avoiding unnecessary re-renders, has tooling for deep state updates without messy syntax (immer) and strikes an overall good balance between powerful and easy to use. Cons might be that it is a bit more obscure so people might have to learn it. Also the learning curve is a bit steep. YMMV
I use a simple 4 point system for state management:
https://github.com/prettydiff/wisdom/blob/master/state_manag...
I use it for an OS GUI here which fully loads in 200ms in Chrome (300ms Edge):
https://github.com/prettydiff/share-file-systems
When simple things, like state management, become complicated they are either over engineered or poorly planned.
I use a simple 4 point system for state management:
https://github.com/prettydiff/wisdom/blob/master/state_manag...
I use it for an OS GUI here which fully loads in 200ms in Chrome (300ms Edge):
https://github.com/prettydiff/share-file-systems
When simple things, like state management, become complicated they are either over engineered or poorly planned.
Like most systems, itโs all about how it is setup. Iโve learned over 5-7 years how to organize FE (with redux) code so it is readable. Also inheriting a system can be quite the burden and I could see how it was be difficult to grok.
I also heavily leverage https://github.com/neurosnap/robodux to treat redux as a database.
At the end of the day, redux is an event emitter (pub/sub) with a single object that stores all of your state that multiple components need to reuse.