Zustand: React state management with hooks
Immutable store-based React state management without boilerplate.
Learn more about zustand
Zustand is a lightweight state management library for React applications that provides hook-based access to centralized application state. It implements a store creation pattern where state and update functions are encapsulated together, with changes propagated through immutable transformations that trigger selective component re-renders. The library uses a subscription model that directly connects components to store slices without requiring context providers or wrapper components. Its architecture addresses React concurrency challenges including zombie child problems where components access deleted state, context loss between multiple renderers, and stale closures that reference outdated state values. The implementation prioritizes minimal bundle size and zero boilerplate while maintaining compatibility with React's rendering cycle and concurrent features.
Minimal Boilerplate Setup
State consumption occurs through hooks without requiring context providers or wrapper components. Components subscribe to specific state slices and re-render only when those slices change, eliminating prop drilling.
Single-Function Store Creation
Store creation uses one function call with inline state and action definitions. No reducers, action creators, or middleware configuration layers are required for basic usage.
Concurrency Problem Solutions
Built-in handling for React concurrency issues including zombie child problems, context loss between mixed renderers, and stale closures. Prevents common edge cases that break other state management libraries.
import { create } from 'zustand'
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 }))
}))
function Counter() {
const { count, increment } = useStore()
return <button onClick={increment}>{count}</button>
}Patch release fixing `shallow` handling of undefined values and making `persist` middleware's `setState` return the storage promise.
- –Update code relying on `shallow` if you pass undefined values; the comparator now handles them correctly.
- –Await the promise returned by `setState` in `persist` middleware if you need to confirm storage completion.
Patch release wrapping getSnapshot in useCallback for minor React rendering optimization in edge cases.
- –Expect slightly improved React performance when store snapshots are frequently recreated.
- –No breaking changes or migration steps required; safe drop-in upgrade from v5.0.6.
Patch release with minor devtools and middleware export fixes; no breaking changes or migration required.
- –Devtools middleware now respects explicit action names without inferring types automatically.
- –Middleware exports are now explicit named exports instead of wildcard re-exports for better tree-shaking.
See how people are using zustand
Related Repositories
Discover similar tools and frameworks used by developers
react
Component-based library using virtual DOM for efficient UI rendering.
react-markdown
Render markdown as React components via unified.
lucide
Framework-agnostic SVG icons with native component packages.
tailwindcss
PostCSS framework generating utility classes from scanned templates.
create-react-app
Zero-configuration React scaffolding tool with preconfigured toolchain.