Comparing global state libraries with React Hooks
I have been developing several libraries for global state with React Hooks. While developing them, I was interested in comparing with existing libraries. It turns out there are various points to compare, showing characteristics of such libraries.
I started creating a comparison table in the issue. As the table becomes bigger, let's create a separate repo so that library authors can contribute improving the comparison.
- Does it use React Context? What is context value?
- Does it use subscription for state propagation?
- Does it have render optimization? What is the technique?
- Does it have dependencies? What are they?
- Does it avoid tearing in concurrent mode?
- Does it support state branching in concurrent mode?
Render optimization means avoiding unnecessary re-renders.
If a state object is { a: 1, b: 2 }
and a component only uses a
,
it won't re-render if only b
is changed.
For "tearing" and "state branching", refer https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode. These are not necessarily problems depending on requirements.
- Bundle size
- js-framework-benchmark
Point 1 | Point 2 | Point 3 | Point 4 | Point 5 | Point 6 | |
---|---|---|---|---|---|---|
react-tracked | State-based object | Yes | Proxy-based tracking and selector function | No | Yes | Yes |
constate | State-based object | No | Multiple contexts | No | Yes | Yes |
unstated-next | State-based object | No | No | No | Unknown (maybe yes) | Unknown (maybe yes) |
zustand | No | Yes | Selector function | No | No | No |
react-sweet-state | State-based object | Yes | Selector function | No | No | No |
storeon | Store | Yes | Shallow state properties | No | No | No |
react-hooks-global-state | No | Yes | Shallow state properties | No | Yes | No |
react-redux (hooks) | Store | Yes | Selector function | Redux | No | No |
reactive-react-redux | State-based object | Yes | Proxy-based tracking and selector function | Redux | Yes | No |
easy-peasy | Store | Yes | Selector function | Redux, immer and so on | Unknown (maybe no) | Unknown (maybe no) |
mobx-react-lite | Mutable state object | No | Proxy-based tracking | MobX | No | No |
hookstate | No | Yes | Proxy-based tracking | No | Unknown | Unknown |
recoil | Probably rich state-based object | Yes with atom abstraction | atoms (incl. selectors) | No | Not yet | Not yet |
react-easy-state(Note: This library does not provide Hooks API) | No | Yes with observer | observer | @nx-js/observer-util | Unknown | Unknown |
If you have questions, suggestions or corrections, please file an issue.
If you have a new library to add, please file a pull request. Please add a new row at the end of the table.