image

React state management libraries

3rd-party libraries to manage React states with scalability in mind

In a typical React app you can just use component local state, hooks or context to manage application data flow. More complex apps create some challenges on sharing global data, code splitting, concurrent mode, time-travel debugging.

Following libraries are opinionated in the way they manage centralized data, works with any UI layer, supports debugging tools, predictable data flow, and many more out-of-the-box features.


Redux

image

redux.js.org

Redux is a predictable state container for JavaScript apps. Use Redux when you have reasonable amounts of data changing over time, you need a single source of truth, and you find that approaches like keeping everything in a top-level React component's state are no longer sufficient.

Recoil

image

recoiljs.org

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Mobx

image

mobx.js.org

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming. While MobX works independently from React, they are most commonly used together.

Flux

image

facebook.github.io

Flux is the application architecture that Facebook uses for building client-side web applications by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

XState

image

xstate.js.org

XState is a library for creating, interpreting, and executing finite state machines and statecharts, as well as managing invocations of those machines as actors.