One of the problems with React is making a choice between the many third party library options to use with React.
State management was dominated by the Redux state management library after the Flux wars with MobX perhaps a distant second (which I preferred over Redux).
In more recent times, new thoughts have emerged. Redux is still popular and has been through different variations itself. redux-toolkit is perhaps the most recommended way at the moment for Redux users and looks much nicer than the redux I first started trying to use.
Redux still dominates, but a few new players have started getting some attention in the React world.
State library comparisons
I found this video by Jack Herrington a great overview of some of the libraries and the different types of React state management libraries avaialable.
There is also a GitHub repo that has code examples of 20 different React state management libraries, which is a lot more than is detailed in the above video.
[akita vs jotai vs mobx vs recoil vs redux vs valtio vs xstate vs zustand](https://www.npmtrends.com/akita-vs-jotai-vs-mobx-vs-recoil-vs-valtio-vs-xstate-vs-zustand-vs-redux on npmtrends)
- you might want to remove redux from this comparison if you are interested in the others to get a better view as redux has a lot more downloads.
Flux libraries
As mentioned, redux-toolkit is a very popular helper for redux, the most popular flux implemenation.
Another library that is less verbose and has gained popularity is zustand. Zustand uses react hooks, doesn’t need context providers. Even if you just check out the link for zustand as it is pretty cool!
Bi-directional state management
I found valtio particularly interesting as it seems a cleaner solution than MobX looking at the examples and kind of reminds me of Vue (which I have been using lately). Check out Pinia in Vue if you are using that as it will become Vuex 5 and seems really clean.
- valtio compared to vue article with a code example
- check valtio issues to make sure nothing will trip you up
Interesting Valtio links
- Discussion on how to set up a computed/derived state in Valtio
- CRDT integration with Valtio to allow auto syncing of state between client and server
Atomic State management
Atomic state management seems to be a popular new technique, with Recoil being invented by a Facebook/Meta? employee Dave McCabe. Jotai is inspired by Recoil and some people prefer it over Recoil.
State machine state management
xstate to model state machines is a popular state management library in React. There is also a nifty looking tool that shows a visualisation of your state machine in realtime.
When to use each
jotai vs valtio
- github discussion on when to use jotai or valtio
- my general recommendation is jotai over valtio… because the mental model of jotai is so much closer to that of react
- Valtio, on the other hand, is magical, wow, it just works, with less code, just JS, various ways to implement action handlers, unopinionated
- valtio or jotai by their creator and example apps for each and explaining data centric vs component-centric
- use valtio for data-centric apps and jotai for component-centric apps
- if you really like the syntax of valtio, pick valtio, otherwise pick jotai. If you are even unsure about it, just pick jotai which has less gotchas
- can valtio replace jotai completetly
- valtio/zustand states become a bit tricky in ssr scenario… the module state is shared among sessions. So, you need to do something to isolate it. If your app is something totally consistent across sessions, it might not be an issue