sahilrajput03 / lets-compare-global-state-with-react-hooks

Comparing global state libraries with React Hooks

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

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. Does it avoid tearing in concurrent mode?
6. Does it support state branching in concurrent mode?

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.

TODO

• Bundle size
• js-framework-benchmark

Comparison Table

	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

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.