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.

dai-shi / lets-compare-global-state-with-react-hooks Goto Github PK