/ReactStateMuseum

A whirlwind tour of React state management systems by example

Primary LanguageJavaScriptMIT LicenseMIT


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?

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


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!