12 React State Management Tool
Sarthak
2 years ago

1

  1. Redux
  2. MobX
  3. Recoil
  4. Akita
  5. Hookstate
  6. React Query
  7. Eazy Peazy
  8. Zustand
  9. xState
  10. Flux
  11. Overmind
  12. effector

1. React Redux

https://github.com/reduxjs/react-redux https://react-redux.js.org/

  • Maintained by the Redux team
  • Designed to work with React's component model.
  • Enable your components to interact with the Redux store
  • complex performance optimizations

2. MobX

https://github.com/mobxjs/mobx https://mobx.js.org

A battle tested library that makes state management simple & scalable

The philosophy behind MobX is simple:

  • Straightforward
  • Effortless optimal rendering
  • Architectural freedom

3. Recoil

https://github.com/facebookexperimental/Recoil https://recoiljs.org/

  • Minimal and Reactish
  • Data-Flow Graph
  • Cross-App Observation

Demo : https://youtube.com/watch?v=_ISAA_Jt9kI

4. Akita

https://github.com/datorama/akita/ https://datorama.github.io/akita/

Reactive State Management Tailor-Made for JS Apps

  • Built on top of RxJS
  • Uses object-oriented design principles instead of functional programming
  • Saves hassle of creating boilerplate code

5. Hookstate

https://github.com/avkonst/hookstate https://hookstate.js.org/

Simple but incredibly fast and flexible state management that is based on React state hook

  • First-class Typescript
  • Incredibly Fast
  • Feature Rich
  • Development Tools
  • Plugins System
  • Easy to Use

6. React Query

https://github.com/tannerlinsley/react-query https://react-query.tanstack.com/

Performant and powerful data synchronization for React

Fetch, cache and update data in your React and React Native applications all without touching any "global state".

7. Eazy Peazy

https://github.com/ctrlplusb/easy-peasy

An abstraction of Redux, providing a reimagined API that focuses on developer experience

  • Zero configuration
  • No boilerplate
  • React hooks based API
  • Extensive TypeScript support
  • Encapsulate data fetching

8. Zustand

Live Demo: https://codesandbox.io/s/dazzling-moon-itop4 https://github.com/pmndrs/zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated Still just enough to be explicit and flux-like

9. XState

https://github.com/davidkpiano/xstate https://xstate.js.org/docs/

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

  • Finite State Machines
  • Statecharts

10. Flux

https://github.com/facebook/flux https://facebook.github.io/flux/

Flux is the application architecture that Facebook uses for building client-side web applications.

It complements React's composable view components by utilizing a unidirectional data flow.

11. Overmind

https://overmindjs.org/ https://github.com/cerebral/overmind

Overmind aims for a developer experience where that is all you focus on, reducing the orchestration of state management to a minimum. Making you a happier and more productive developer!

12. Effector

https://effector.dev/ https://github.com/effector/effector

Type Safe TypeScript and Flow support out of box.

Framework agnostic Can work with any UI or server framework.

Developer-friendly Simple API surface and helpful community.

Maximum performance Static initialization provides boost in performance for runtime.

Tiny bundle size Effector uses Rollup and Terser to provide small builds.

Plain javascript No decorators, no proxies, no classes required. Only you and your data.

Follow for more content

Hope you like this list, follow me on twitter for more amazing content @sarthaksavvy

Sarthak

2 years ago

1