Let's compare global state with React Hooks
Comparing global state libraries with React Hooks
Motivation
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.
Comparison points
- 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?
- What's the level of compatibility with concurrent rendering?
- Bundle size (Minified + Gzipped)
Notes
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.
Comparison Table
| 1 | 2 | 3 | 4 | 5 | 6 | |
|---|---|---|---|---|---|---|
| react-tracked | State-based object | Yes | Proxy-based tracking and selector function | use-context-selector, proxy-compare | Level 3 | 1.9kB |
| constate | State-based object | No | Multiple contexts | No | Level 3 | 508B |
| unstated-next | State-based object | No | No | No | Unknown | 362B |
| zustand | No | Yes | Selector function | No | Level 2 | 954B |
| react-sweet-state | State-based object | Yes | Selector function | No | Unknown | 3.6kB |
| storeon | Store | Yes | Shallow state properties | No | Unknown | 370B |
| react-hooks-global-state | No | Yes | Shallow state properties | No | Level 1 | 1.1kB |
| react-redux (hooks) | Store | Yes | Selector function | Redux | Level 2 | 5.4kB |
| easy-peasy | Store | Yes | Selector function | Redux, immer and so on | Unknown | 9.6kB |
| mobx-react-lite | Mutable state object | No | Proxy-based tracking | MobX | Unknown | 2kB |
| hookstate | No | Yes | Proxy-based tracking | No | Unknown | 4.5kB |
| recoil | Probably rich state-based object | Yes with atom abstraction | atoms (incl. selectors) | No | Level 2 | 21.1kB |
| react-easy-state(Note: This library does not provide Hooks API) | No | Yes with observer | observer | @nx-js/observer-util | Unknown | 2.9kB |
| react-tagged-state | No | Yes | Selector function with deps tracking | No | Unknown | 804B |
| agile-ts | No | Yes | Runtime combining multiple rerender triggers | No | Unknown | 12.7kB |
| jotai | Store | Yes, atom-based subscription | atoms | No | Level 1 / (Level 3) | 2.6kB |
| valtio | No | Yes | Proxy-based tracking | proxy-compare | Level 2 | 2.5kB |
Contribution
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.