Zust4help Full May 2026

import  create  from 'zustand'
const useStore = create((set) => (
// state
count: 0,
// actions
increment: () => set((state) => ( count: state.count + 1 )),
decrement: () => set((state) => ( count: state.count - 1 )),
reset: () => set( count: 0 )
))

Use it in any component:

function Counter() 
  const  count, increment, decrement, reset  = useStore()
  return (
    <div>
      <span>count</span>
      <button onClick=increment>+</button>
      <button onClick=decrement>-</button>
      <button onClick=reset>Reset</button>
    </div>
  )

No re-render issues – components only subscribe to the pieces of state they actually use.

import  devtools  from 'zustand/middleware'
const useStore = create(
devtools(
(set) => (
count: 0,
increment: () => set((state) => ( count: state.count + 1 ), false, 'increment'),
),
 name: 'MyAppStore' 
)
)

Zustand is not tied to React. You can use it in vanilla JS:

import  createStore  from 'zustand/vanilla'
const store = createStore((set) => (
count: 0,
increment: () => set((state) => ( count: state.count + 1 )),
)) zust4help full
// Subscribe to changes
store.subscribe((state) => console.log('State changed:', state))
// Get current state
console.log(store.getState().count) // 0
// Dispatch actions
store.getState().increment()
console.log(store.getState().count) // 1

For React integration:

import  useStore  from 'zustand'
import  store  from './vanilla-store'
function Counter() 
const count = useStore(store, (state) => state.count)
const increment = useStore(store, (state) => state.increment)
return <button onClick=increment>count</button>

---

Persist middleware (save to localStorage):

import  persist  from 'zustand/middleware'
const useStore = create(
persist(
(set) => ( theme: 'light', setTheme: (theme) => set( theme ) ),
 name: 'app-storage'  // unique key
)
)

Devtools (Redux DevTools integration):

import  devtools  from 'zustand/middleware'
const useStore = create(devtools((set) => (
// state & actions
),  name: 'MyStore' ))

Immer (mutative updates):

import  produce  from 'immer'
import  create  from 'zustand'
const useStore = create((set) => (
nested:  deep:  value: 0  ,
updateDeep: () =>
set(
produce((state) => 
state.nested.deep.value += 1
)
)
))

In the world of React state management, developers have long battled the complexity of Redux, the boilerplate of Context API, and the quirks of older libraries like MobX. But in recent years, a lightweight champion has risen to the top: Zustand.

Created by the developers behind react-spring (pmndrs), Zustand is a small, fast, and scalable state-management solution. It is often described as "just enough" — providing a solid foundation without the unnecessary weight.

Here is the full breakdown of why Zustand has become the go-to choice for modern React development.

---

npm install zustand
# or
yarn add zustand
# or
pnpm add zustand

// store.js
import  create  from 'zustand'
const useStore = create((set) => (
bears: 0,
increase: () => set((state) => ( bears: state.bears + 1 )),
))
// In _app.js or layout
if (typeof window === 'undefined') 
// Server-side: fresh store per request
useStore.setState( bears: 0 )
 import create from 'zustand' const useStore = create((set)

---

Zustand’s true strength comes from its middleware ecosystem.