GantMan/ReactStateMuseum

A whirlwind tour of React state management systems by example

JavaScript

1,538

204 commits

updated Apr 10, 2023

See the code

README


One Packing List App Written in:

TechnologyReactReact Native
setState
React 16.x Context
React 16.x useContext
Redux
MobX
unstated
MobX-State-Tree
GraphQL Apollo + Amazon AppSync
apollo-link-state
setState + react-automata
Freactal
pure-store
ReactObservableStore
react-easy-state
rematch
unistore
Microstates
react-recontext
remx Coming Soon - Contribute Here?
simple-remx
constate
controllerim Coming Soon - Contribute Here?
immer
parket Coming Soon - Contribute Here?
react-contextual Coming Soon - Contribute Here?
react-copy-write Coming Soon - Contribute Here?
react-simplified
reim Coming Soon - Contribute Here?
React 16.x Context + ReduxComing Soon - Contribute Here?
ReComponent Coming Soon - Contribute Here?
undux Coming Soon - Contribute Here?
React 16.7.0-alpha useState Hook
redux-lightweight Coming Soon - Contribute Here?
overmind Coming Soon - Contribute Here?
Venti Coming Soon - Contribute Here?
Recoil Coming Soon - Contribute Here?
Effector Coming Soon - Contribute Here?
zustand Coming Soon - Contribute Here?
Jōtai Coming Soon - Contribute Here?

Examples to help portray the how, why, which, pros, and cons of various state management systems in the React ecosystem.

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

WebNative
example gif of appexample gif of app

What are the differences?

Ye honest truth here

This repo exists so you can look at the code for yourself, OR check this blog post on my findings if you'd like:

To Run Web

  • Click the codesandbox link in the list above
  • OR Clone this repo, then cd into each folder and follow the directions in readme

To Run Native

  • Clone this repo, then cd into each folder and follow the directions in readme

Contributors

Special thanks to all the wonderful people who contributed in some way to the React State Museum

This project follows the all-contributors specification. Contributions of any kind welcome!

apollo
apollographql
appsync
appsync-sdk
freactal
immer
microstates
mobx
mobx-state-tree
pure-store
react
react-automata
react-native
react-observable-store
redux
reduxx
rematch
state-management
unistore
unstated

GantMan/ReactStateMuseum

A whirlwind tour of React state management systems by example

JavaScript

1,538

204 commits

updated Apr 10, 2023

See the code

README


One Packing List App Written in:

TechnologyReactReact Native
setState
React 16.x Context
React 16.x useContext
Redux
MobX
unstated
MobX-State-Tree
GraphQL Apollo + Amazon AppSync
apollo-link-state
setState + react-automata
Freactal
pure-store
ReactObservableStore
react-easy-state
rematch
unistore
Microstates
react-recontext
remx Coming Soon - Contribute Here?
simple-remx
constate
controllerim Coming Soon - Contribute Here?
immer
parket Coming Soon - Contribute Here?
react-contextual Coming Soon - Contribute Here?
react-copy-write Coming Soon - Contribute Here?
react-simplified
reim Coming Soon - Contribute Here?
React 16.x Context + ReduxComing Soon - Contribute Here?
ReComponent Coming Soon - Contribute Here?
undux Coming Soon - Contribute Here?
React 16.7.0-alpha useState Hook
redux-lightweight Coming Soon - Contribute Here?
overmind Coming Soon - Contribute Here?
Venti Coming Soon - Contribute Here?
Recoil Coming Soon - Contribute Here?
Effector Coming Soon - Contribute Here?
zustand Coming Soon - Contribute Here?
Jōtai Coming Soon - Contribute Here?

Examples to help portray the how, why, which, pros, and cons of various state management systems in the React ecosystem.

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

WebNative
example gif of appexample gif of app

What are the differences?

Ye honest truth here

This repo exists so you can look at the code for yourself, OR check this blog post on my findings if you'd like:

To Run Web

  • Click the codesandbox link in the list above
  • OR Clone this repo, then cd into each folder and follow the directions in readme

To Run Native

  • Clone this repo, then cd into each folder and follow the directions in readme

Contributors

Special thanks to all the wonderful people who contributed in some way to the React State Museum

This project follows the all-contributors specification. Contributions of any kind welcome!

apollo
apollographql
appsync
appsync-sdk
freactal
immer
microstates
mobx
mobx-state-tree
pure-store
react
react-automata
react-native
react-observable-store
redux
reduxx
rematch
state-management
unistore
unstated

Project health

Overall

1.2/10

Maintained

0/10

Code review

5/10
OpenSSF Scorecard

Significant stargazers

Yordis Prieto

276 followers · starred Oct 2019

Brent Vatne

4,532 followers · starred May 2020

Mikhail Shustov

69 followers · starred May 2018

Johannes Ewald

867 followers · starred Jul 2019