https://github.com/dai-shi/lets-compare-global-state-with-react-hooks
Comparing global state libraries with React Hooks
https://github.com/dai-shi/lets-compare-global-state-with-react-hooks
Last synced: 6 months ago
JSON representation
Comparing global state libraries with React Hooks
- Host: GitHub
- URL: https://github.com/dai-shi/lets-compare-global-state-with-react-hooks
- Owner: dai-shi
- Created: 2019-11-21T08:41:15.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2021-12-25T11:27:38.000Z (almost 4 years ago)
- Last Synced: 2025-03-27T17:38:21.740Z (7 months ago)
- Size: 12.7 KB
- Stars: 58
- Watchers: 6
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - lets-compare-global-state-with-react-hooks - shi | 30 | (Others)
README
# 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](https://github.com/dai-shi/react-tracked/issues/1).
As the table becomes bigger, let's create a separate repo
so that library authors can contribute improving the comparison.
## Comparison points
1. Does it use React Context? What is context value?
2. Does it use subscription for state propagation?
3. Does it have render optimization? What is the technique?
4. Does it have dependencies? What are they?
5. What's the level of compatibility with concurrent rendering?
6. 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
.
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.