---
sidebar_position: 3
title: State Managers
comment: true
tags:
  - Reactjs
  - State managers
last_update:
  date: 03/30/2023
  author: hunghg255
---

## 1. Overview

![Overview state](https://res.cloudinary.com/hunghg255/image/upload/v1680098319/blog/figure10_jyg9mw.png)

![](https://res.cloudinary.com/hunghg255/image/upload/v1680105253/blog/figure11_farajd.png)

### a. Reactive State Management

![](https://res.cloudinary.com/hunghg255/image/upload/v1680099051/blog/flow2_xwqhkf.png)

### b. Atomic State Management

![](https://res.cloudinary.com/hunghg255/image/upload/v1680099174/blog/flow3_n8ytr9.png)

### c. Uni-Directional State Management

![](https://res.cloudinary.com/hunghg255/image/upload/v1680099225/blog/flow4_elprza.png)

### d. Bi-Directional State Management

![](https://res.cloudinary.com/hunghg255/image/upload/v1680099278/blog/flow5_j5mcsf.png)

## 2. Reference

| Category       | Name                                       | Libraries                                                                                                | Downloads                                                                                                   |
| -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Hooks          | [Prop Drilling](http://localhost:3000/)    | [Prop Drilling](https://react.dev/learn/passing-data-deeply-with-context#the-problem-with-passing-props) |                                                                                                             |
| Hooks          | [Context](http://localhost:3001/)          | [Context](https://react.dev/learn/scaling-up-with-reducer-and-context)                                   |                                                                                                             |
| Hooks          | [Global State](http://localhost:3016/)     | [React Hooks Global State](https://www.npmjs.com/package/react-hooks-global-state)                       | ![npm](https://img.shields.io/npm/dw/react-hooks-global-state?color=white&label=%20&style=flat-square)      |
| Hooks          | [Hookstate](http://localhost:3018/)        | [Hookstate](https://hookstate.js.org/)                                                                   | ![npm](https://img.shields.io/npm/dw/@hookstate/core?color=white&label=%20&style=flat-square)               |
| Hooks          | [Teaful](http://localhost:3021/)           | [Teaful](https://github.com/teafuljs/teaful)                                                             | ![npm](https://img.shields.io/npm/dw/teaful?color=white&label=%20&style=flat-square)                        |
| FSM            | [XState](http://localhost:3007/)           | [XState](https://xstate.js.org/docs/)                                                                    | ![npm](https://img.shields.io/npm/dw/xstate?color=white&label=%20&style=flat-square)                        |
| API+           | [React Query](http://localhost:3008/)      | [React Query](https://react-query.tanstack.com/)                                                         | ![npm](https://img.shields.io/npm/dw/react-query?color=white&label=%20&style=flat-square)                   |
| Reactive       | [Effector](http://localhost:3010/)         | [Effector](https://effector.dev/)                                                                        | ![npm](https://img.shields.io/npm/dw/effector?color=white&label=%20&style=flat-square)                      |
| Reactive       | [Akita](http://localhost:3012/)            | [Akita](https://datorama.github.io/akita/)                                                               | ![npm](https://img.shields.io/npm/dw/@datorama/akita?color=white&label=%20&style=flat-square)               |
| Reactive       | [Rxjs](http://localhost:3013/)             | [Observable Hooks](https://observable-hooks.js.org/)                                                     | ![npm](https://img.shields.io/npm/dw/observable-hooks?color=white&label=%20&style=flat-square)              |
| Reactive       | [Storeon](http://localhost:3020/)          | [Storeon](https://github.com/storeon/storeon)                                                            | ![npm](https://img.shields.io/npm/dw/storeon?color=white&label=%20&style=flat-square)                       |
| Atomic         | [Jotai](http://localhost:3006/)            | [Jotai](https://github.com/pmndrs/jotai)                                                                 | ![npm](https://img.shields.io/npm/dw/jotai?color=white&label=%20&style=flat-square)                         |
| Atomic         | [Recoil](http://localhost:3009/)           | [Recoil](https://recoiljs.org/)                                                                          | ![npm](https://img.shields.io/npm/dw/recoil?color=white&label=%20&style=flat-square)                        |
| Atomic         | [AgileTs](http://localhost:3099/)          | [AgileTs](https://agile-ts.org/)                                                                         | ![npm](https://img.shields.io/npm/dw/@agile-ts/core?color=white&label=%20&style=flat-square)                |
| Atomic         | [Nanostores](http://localhost:3099/)       | [Nanostores](https://github.com/nanostores/nanostores)                                                   | ![npm](https://img.shields.io/npm/dw/nanostores?color=white&label=%20&style=flat-square)                    |
| Unidirectional | [Zustand](http://localhost:3002/)          | [Zustand](https://zustand.surge.sh/)                                                                     | ![npm](https://img.shields.io/npm/dw/zustand?color=white&label=%20&style=flat-square)                       |
| Unidirectional | [Redux Toolkit](http://localhost:3003/)    | [Redux Toolkit](https://redux-toolkit.js.org/)                                                           | ![npm](https://img.shields.io/npm/dw/@reduxjs/toolkit?color=white&label=%20&style=flat-square)              |
| Unidirectional | [Rematch](http://localhost:3017/)          | [Rematch](https://rematchjs.org/)                                                                        | ![npm](https://img.shields.io/npm/dw/@rematch/core?color=white&label=%20&style=flat-square)                 |
| Unidirectional | [Unistore](http://localhost:3014/)         | [Unistore](https://www.npmjs.com/package/unistore)                                                       | ![npm](https://img.shields.io/npm/dw/unistore?color=white&label=%20&style=flat-square)                      |
| Bidirectional  | [MobX](http://localhost:3004/)             | [Mobx](https://mobx.js.org/README.html)                                                                  | ![npm](https://img.shields.io/npm/dw/mobx?color=white&label=%20&style=flat-square)                          |
| Bidirectional  | [Valtio](http://localhost:3005/)           | [Valtio](https://www.npmjs.com/package/valtio)                                                           | ![npm](https://img.shields.io/npm/dw/valtio?color=white&label=%20&style=flat-square)                        |
| Bidirectional  | [MobX State Tree](http://localhost:3015/)  | [Mobx State Tree](https://mobx-state-tree.js.org/)                                                       | ![npm](https://img.shields.io/npm/dw/mobx-state-tree?color=white&label=%20&style=flat-square)               |
| Bidirectional  | [React Easy State](http://localhost:3019/) | [React Easy State](https://github.com/RisingStack/react-easy-state)                                      | ![npm](https://img.shields.io/npm/dw/@risingstack/react-easy-state?color=white&label=%20&style=flat-square) |
