ReactStateMuseum

A whirlwind tour of React state management systems by example

MIT License

Stars
1.6K

One Packing List App Written in:

Technology React React 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 + Redux Coming 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.

Web Native
example gif of app example gif of app

What are the differences?

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

Arthur GunnπŸ’» πŸ’‘ Jason LengstorfπŸ“– Marco AfonsoπŸ’» πŸ’‘ Robert DeLucaπŸ’» πŸ’‘ stereoboosterπŸ“– Juan David CastroπŸ’» πŸ“– πŸ’‘ Iurii KyrylenkoπŸ’»
Charles LowellπŸ’» Jakub WadasπŸ’» πŸ“– Anton RusinovπŸ’» πŸ’‘ Miklos BertalanπŸ’» Gant LabordeπŸ’» πŸ“– πŸ’‘ πŸ“ ⚠️ Tyler ReitzπŸ’» πŸ“– Daniel ZlotinπŸ’» πŸ’‘ ⚠️
Nuno Jesus🎨 Alek MeraniπŸ’» πŸ“– Ole Christian EidheimπŸ’» πŸ“– HazπŸ’» Stephen MathiesonπŸ“– Christoph Benjamin WeberπŸ› πŸ’» Aaron YoshitakeπŸ’»
IniZioπŸ’» Ryan LintonπŸ’» Joe DuranπŸ’» Minh TranπŸ’» Tudor Pavel⚠️ Lubos BelakπŸ“– RyanπŸ’»
Niko SalminenπŸ’» J.C. HiattπŸ’‘ doniyor2109πŸ’» marcelkalveramπŸ’» πŸ€” Alex LewisπŸ“– Steven LangbroekπŸ› KevinπŸ’» πŸ“–
Lubos BelakπŸ› Will SchmidπŸ’» πŸ“– Solomon AyoolaπŸ’» πŸ“– Dominik FerberπŸ“– Will CaulfieldπŸ’» GlebπŸ’» πŸ“– Pawel SasπŸ’»
Lubos BelakπŸ› Imre OsswaldπŸ’» Frontend DevπŸ’» πŸ“– πŸ’‘

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