- Notifications
You must be signed in to change notification settings - Fork4
dai-shi/lets-compare-global-state-with-react-hooks
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 inthe issue.As the table becomes bigger, let's create a separate reposo 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?
- What's the level of compatibility with concurrent rendering?
- Bundle size (Minified + Gzipped)
Render optimization means avoiding unnecessary re-renders.If a state object is{ a: 1, b: 2 } and a component only usesa,it won't re-render if onlyb is changed.
For "tearing" and "state branching", referhttps://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode.These are not necessarily problems depending on requirements.
| 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 |
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.
About
Comparing global state libraries with React Hooks
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Contributors3
Uh oh!
There was an error while loading.Please reload this page.