🦁
ZustandとValtioの比較 (React状態管理ライブラリの話)
最近書いた2つのツイートのポイントをまとめておきます。
storeの作り方
Zustandの場合
import create from 'zustand'
const useStore = create((set) => ({
count1: 0,
count2: 0,
inc1: () => set((state) => ({ count1: state.count1 + 1 })),
inc2: () => set((state) => ({ count2: state.count2 + 1 })),
}))
-
createは hookを返す -
setで更新する
Valtioの場合
import { proxy, useSnapshot } from 'valtio'
const state = proxy({
count1: 0,
count2: 0,
inc1: () => { ++state.count1 },
inc2: () => { ++state.count2 },
})
-
proxyは JavaScriptのproxy化されたobjectを返す -
stateを直接更新する
Reactコンポーネントでの使い方
Zustandの場合
const count1 = useStore((state) => state.count1)
const inc1 = useStore((state) => state.inc1)
- 作った
useStoreを使う - selectorを使って、値とアクション関数をそれぞれ取り出す
Valtioの場合
const { count1, inc1 } = useSnapshot(state)
-
useSnapshotを使って、作ったstateを渡す - object destructuringで値とアクション関数を取り出す（再レンダリングは自動で最適化される）
GitHubリンク
Discussion