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

Comparing global state libraries with React Hooks

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Comparing global state libraries with React Hooks