Zustand Zustand State Library
Last updated: 2026-11-02
Zustand Zustand State Library
Zustand is a minimal global state library: create defines a store, components call it like a custom Hook, the state is shared across components and no Provider is needed. The core is just two functions, set and get, there is no boilerplate, and it is the popular replacement for Redux in small and medium projects where a full store with actions, reducers and middleware would be too much ceremony.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Library |
| Since | Zustand v4 / v5 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { create } from 'zustand'
const useStore = create((set, get) => ({
count: 0, // state
inc: () => set(s => ({ count: s.count + 1 })), // action
reset: () => set({ count: 0 })
}))
// Inside a component (no Provider required)
const count = useStore(s => s.count) // subscribe to a slice, update precisely
const inc = useStore(s => s.inc)⚙️ Parameters
| selector | The state selector passed when calling the store Hook, e.g. s => s.count; omit it and you subscribe to the whole store, so any change re-renders. |
|---|
Returns：create returns a Hook: calling it returns the selected slice of state; set merges the state and triggers updates in the subscribed components, get reads the latest state.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking the A button changes the number that component B reads - the two components share no parent that passes props, the external store keeps them in sync, and that is exactly how Zustand works (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
