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: 19 days 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 5 years ago)
• Default Branch: main
• Last Pushed: 2021-12-25T11:27:38.000Z (almost 3 years ago)
• Last Synced: 2024-10-02T08:32:12.917Z (about 1 month ago)
• Size: 12.7 KB
• Stars: 59
• Watchers: 7
• 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.