React State Management
There is not an opinionated path for state management in React compared to alternative frameworks.
Forms of state.
- URL
- API
- Forms
URL
Put state in the URL instead of useState.
Library Options
| Category | Library |
|---|---|
| Hooks | (Prop Drilling) |
| Hooks | (Context) |
| Hooks | React Hooks Global State |
| Hooks | Hookstate |
| Hooks | Teaful |
| FSM | XState |
| API+ | React Query |
| Reactive | Effector |
| Reactive | Akita |
| Reactive | Observable Hooks |
| Reactive | Storeon |
| Atomic | Jotai |
| Atomic | Recoil |
| Unidirectional | Zustand |
| Unidirectional | Redux Toolkit |
| Unidirectional | Rematch |
| Unidirectional | Unistore |
| Bidirectional | Mobx |
| Bidirectional | Valtio |
| Bidirectional | Mobx State Tree |
| Bidirectional | React Easy State |
Hooks
| Technique | Strength | Weakness |
|---|---|---|
| Prop Drilling | Standard React Hooks | |
| Context | Simple with useContext | Need to re-render |
API+
| State Type | Option |
|---|---|
| URL | React Router |
| URL | Next Router |
| API Query | React-Query |
| API Query | SWR |
| Forms | React Hook Form |
Reactive
Event based state management.