Bootcamp
Search…
📅
Course Schedule
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
🧮
Algorithms Teaching Guide
💼
Interview Prep Teaching Guide
☺
User Experience Teaching Guide
8.9: React State Management
One of the hallmarks of the React library is that the community has not centralized on a single way of doing things. This means that for each kind of functionality that you might want to add to a React app, there are many competing libraries.
State management refers to the library that manages data sent between components that is not passed as props. As we saw with store.js creating a system to manage data in the app makes it easier to pass data and manage data within the app. The context / reducer hooks store.js setup we created is not the only way to do this in a React app.

Flux

​https://facebook.github.io/flux/ Flux is one of the original state management libraries. It was created sometime around 2014 at Facebook to help with managing React state.

Redux

Redux was meant to simplify Flux. Redux originated the idea of a reducer function that helps set state.

GraphQL

Facebook also originated a back-end system that optimizes the REST API interface. This makes it so that the front-end can request for any model across all the data tables in the system. (For example an AJAX request that gets a user's posts and the comments and likes on that post and the number of shares on that post, etc.). The GraphQL back-end creation and setup is outside the scope of this page.
This back-end system is called GraphQL. With this new syntax for requesting data from the backend comes libraries that help manage the front-end data as well. This is because GraphQL enables a 1:1 relationship between the back-end data requested and the data in React state.

Relay

​https://relay.dev/​
Relay is the official Facebook GraphQL state management library for React.
Apollo
Apollo is the lighter-weight alternative to Relay. It is not supported by a single bug company. It also has support for the other major front-end libraries like Vue and Angular.

Outsiders

MobX

MobX is referred to as a functional reactive state management library. (Confusingly React and reactive are different.) It's based on a ideas that are not strictly JavaScript specific, and have been referred to as Rx: https://en.wikipedia.org/wiki/ReactiveX​
Last modified 2mo ago
Copy link