【Front-end State Management VS】React state management tools comparison，react hooks context / redux / mobx / zustand / jotai / valtio vs each other

[AwesomeDevin]

React state management solution

Introduce

• hook context
• react-redux
• mobx
• zustand
• jotai
• valtio

Scheme comparison

Frame	Principle	Advantage	Disadvantage
hooks context	Based on react hooks, developers can implement internal/external storage	1. Simple to use 2. No need to refer to third-party libraries, the smallest size 3. Support global state storage, but in complex applications Not recommended in 4. Does not depend on the react context, can be called outside the component (under the condition of external storage)	1. When the context value changes, all components that use this context will be re-rendered, based on content maintenance The more modules there are, the larger the area of influence. 2. Using a dependent provider, modifying the store cannot trigger rendering at the top level of the application (App.tsx level) 3. Constrained by the ui framework (react) 4. Dependent hooks call
react-redux	Flux thinking, publish-subscribe mode, functional programming compliance, external storage	1. Does not depend on the react context, can be called outside the component 2. Supports storing global state 3. Not affected by ui Framework Constraints	1. Mental models take some time to understand, especially if you are not familiar with functional programming 2. Coding is cumbersome
mobx	Observer mode + data cutoff, external storage	1. Simple to use 2. Does not depend on the react context, can be called outside the component 3. Supports storing global state 4. Not affected ui framework constraints	1. Variable state model, which may affect debugging in some cases 2. In addition to the relatively large size, the author currently does not feel any obvious shortcomings, 3.99M
zustand	Flux idea, observer mode, external storage	1. Lightweight, easy to use 2. Does not depend on the react context, can be called outside the component 3. Supports storage of global state	1. The framework itself Computed attributes are not supported, but computed can be implemented indirectly with a small amount of code based on the middleware mechanism, or based on the third-party library zustand-computed 2. Constrained by the ui framework (react / vue)
jotai	Based on react hook, internal storage	1. Simple to use 2. In the case of finer component granularity, jotai has better performance 3. Supports storing global state, but it is not recommended in complex applications	1. Rely on the react context and cannot be called outside the component. Relatively speaking, zustand can work better outside the react environment and globally 2. Constrained by the ui framework (react)
valtio	Based on data hijacking, external storage	1. Simple to use, mobx-like (vue-like) programming experience 2. Supports storage of global state 3. Does not depend on the react context, can be called outside the component br/> 4. Not constrained by the ui framework	1. Variable state model, which may affect debugging in some cases 2. At present, the author has not found any other particularly serious shortcomings, and I personally guess that the reason why stars are relatively less than zustand , because there is a conflict between valtio's two-way data binding idea and react.

Source

• hooks context
  1.Use react hooks + context for convenient and fast state management
  2.Build redux with react hooks + context for state management
• react-redux
• mobx

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Build status and related events
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a observable component
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Trigger update event
setInterval(() => {
    myTimer.increase()
}, 1000)

• zustand

import { create } from 'zustand'

// Build status and related events
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// Render component
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

// Trigger update event
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

• jotai

import { atom } from 'jotai'

const countAtom = atom(0)

function Counter() {
  // Build status and related events
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}

• valtio

import { proxy, useSnapshot } from 'valtio'

const state = proxy({ count: 0, text: 'hello' })

function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )

related advice

1. If you need an alternative to useState+useContext, jotai is very suitable, that is, atomic component state management or state sharing between a small number of components.
2. If you are used to redux or like the natural immutable update of react, then zustand will be very suitable.
3. If you are used to vue/slute/mobx, or new to JS/React, the variable model of valtio will be very suitable.
4. If you are using zustand (immutable data model such as redux/) + immer, it is recommended to use valtio(mobx)
5. mobx has the concept of actions, and the concept of valtio is simpler (free). If you want the project to be more standard, you can use mobx. If you want the project to be more free and convenient, you can use valtio

If this article is helpful to you, please give me a 👍
The next issue will bring an analysis of the advantages and disadvantages of Vue state management tools, welcome to pay attention to myBlog](https://github.com/AwesomeDevin/blog) 🌟