React State Management Libraries

Updated Sep 04, 2021#react#libs#lists

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 - 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 - 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 - 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 - 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 - A library for creating, interpreting, and executing finite state machines and statecharts, as well as managing invocations of those machines as actors.