Date: 2023-05-03
Proposer: Sam Behrens
Status: proposed
What problem are we solving? Who asked for it? Why is it important? When do they experience this issue? What data, research and feedback do we have that explains this problem?
If there are any documents that our partners have sent over, drop them here (if you drag it over the page, Notion will automatically upload and host the document.)
With the migration from Vue to React we need to rethink how the state will be managed in this new React app since the two libraries manage and treat state differently. The React library does not prescribe a state library, so several great open-source state libraries exist. We need to weigh the options and decide what suits our application best. The following libraries will be discussed initially chosen by their popularity: Redux, mobX, Zustand, and Jotai. Recoil will not be considered because it is still experimental.
📌 Global state management specifically tries to solve the problem of managing state when there are frequent updates, various use cases, screens, and potential redesigns. The React context API will not be discussed because it primarily serves to avoid prop drilling and does not solve managing large-scale application state.What factors are important when making this decision? Think in the context of our product and audience.
- Stability - Is this project actively maintained with well-documented changes and releases?
- Adoption / Community - Is the project widely adopted in the industry and has good community support around issues as they arise?
- Ecosystem / Tooling - Are there other libraries that enhance the development experience or solve adjacent problems with this library?
What options have been considered? Include the proposed solution here as well
Additional information on the libraries discussed
- Redux and React-redux :
- Built around the Flux architectural pattern, Redux is one of the oldest and most popular state libraries available. Although the library is framework agnostic, it is most often used with React applications. Dan Abramov, a core member of the React team, also developed it.
- Mobx
- ****Mobx is also another older library that is framework agnostic. Its build around reactive programming principles and uses the OOP paradigm with observables.
- Zustand:
- Zustand is a lightweight library based on Flux principles. It uses hooks, has minimal boilerplate, and has a streamlined API. This library only can work with React.
- Jotai:
- Jotai subscribes to the atomicity principle, where every state slice can be composed as an atom, and those atoms can be chained together and subscribed to by components. This library is similar to the experimental library currently being developed by Meta called Recoil.
| Library | Stability | Adoption/Community | Ecosystem/Tooling | Additional Pros | Additional cons |
|---|---|---|---|---|---|
| Redux |
|
|
|
|
|
| Mobx |
|
|
|
|
|
| Zustand |
|
|
|
|
|
| Jotai |
|
|
|
|
|
Which of the above options is bring proposed?
e.g. "{title of option 1}", because {justification. e.g., only option, which meets k.o. criterion decision driver | which resolves force {force} | … }.
Redux or Zustand would be a good option for future state management. These libraries are well-supported and easy to ramp up on. They are also widely popular, and new volunteers who have worked in React will have had experience with them.
Of those two, I lean towards Redux because it supports larger complicated applications and is very mature. Although it requires a lot of boilerplate, it is relatively easy to learn and has lots of resources to tackle issues. Additionally, if we ever decide to move away from React for whatever reason, redux is library agnostic, so we can keep our state management layer.
The reason for not choosing Mobx is because the RxJS API is difficult to learn with a lot of onboarding time.
Jotai is similar and in competition with Meta's experimental library Recoil, and it’s unclear if the community will eventually favor Recoil. Additionally, atomic state management is a fairly new concept, and might take a while to ramp up on it.
How do you propose we roll this solution out over time and begin to incorporate it into our current codebase? Are there intermediary steps?
The phases of the adoption of this new state management library depend on the decisions discussed in [WIP] Use React for Frontend Development and [WIP] Document Plan for Migrating from Vue to React . This section will have to be determined.
Where can we go to read more information about the option being proposed?