npm install zustand# or yarn add zustand

First create a store

importcreatefrom'zustand'constuseStore=create(set=>({bears:0,increasePopulation:()=>set(state=>({bears:state.bears+1})),removeAllBears:()=>set({bears:0})}))

Then bind your components, and that's it!

functionBearCounter(){constbears=useStore(state=>state.bears)return<h1>{bears} around here ...</h1>}functionControls(){constincreasePopulation=useStore(state=>state.increasePopulation)return<buttononClick={increasePopulation}>one up</button>}

Why zustand over redux?

Why zustand over context?

Recipes

Fetching everything

conststate=useStore()

Selecting multiple state slices

constnuts=useStore(state=>state.nuts)consthoney=useStore(state=>state.honey)

importshallowfrom'zustand/shallow'// Object pick, re-renders the component when either state.nuts or state.honey changeconst{ nuts, honey}=useStore(state=>({nuts:state.nuts,honey:state.honey}),shallow)// Array pick, re-renders the component when either state.nuts or state.honey changeconst[nuts,honey]=useStore(state=>[state.nuts,state.honey],shallow)// Mapped picks, re-renders the component when state.treats changes in order, count or keysconsttreats=useStore(state=>Object.keys(state.treats),shallow)

consttreats=useStore(state=>state.treats,(oldTreats,newTreats)=>compare(oldTreats,newTreats))

Memoizing selectors

constfruit=useStore(useCallback(state=>state.fruits[id],[id]))

constselector=state=>state.berriesfunctionComponent(){constberries=useStore(selector)

Overwriting state

importomitfrom"lodash-es/omit"constuseStore=create(set=>({salmon:1,tuna:2,deleteEverything:()=>set({},true),// clears the entire store, actions includeddeleteTuna:()=>set(state=>omit(state,['tuna']),true)}))

Async actions

constuseStore=create(set=>({fishies:{},fetch:asyncpond=>{constresponse=awaitfetch(pond)set({fishies:awaitresponse.json()})}}))

Read from state in actions

constuseStore=create((set,get)=>({sound:"grunt",action:()=>{constsound=get().sound// ...}})

Reading/writing state and reacting to changes outside of components

constuseStore=create(()=>({paw:true,snout:true,fur:true}))// Getting non-reactive fresh stateconstpaw=useStore.getState().paw// Listening to all changes, fires on every changeconstunsub1=useStore.subscribe(console.log)// Listening to selected changes, in this case when "paw" changesconstunsub2=useStore.subscribe(console.log,state=>state.paw)// Subscribe also supports an optional equality functionconstunsub3=useStore.subscribe(console.log,state=>[state.paw,state.fur],shallow)// Subscribe also exposes the previous valueconstunsub4=useStore.subscribe((paw,previousPaw)=>console.log(paw,previousPaw),state=>state.paw)// Updating state, will trigger listenersuseStore.setState({paw:false})// Unsubscribe listenersunsub1()unsub2()unsub3()unsub4()// Destroying the store (removing all listeners)useStore.destroy()// You can of course use the hook as you always wouldfunctionComponent(){constpaw=useStore(state=>state.paw)

Using zustand without React

importcreatefrom'zustand/vanilla'conststore=create(()=>({ ...}))const{ getState, setState, subscribe, destroy}=store

importcreatefrom'zustand'importvanillaStorefrom'./vanillaStore'constuseStore=create(vanillaStore)

Transient updates (for often occuring state-changes)

constuseStore=create(set=>({scratches:0, ...}))functionComponent(){// Fetch initial stateconstscratchRef=useRef(useStore.getState().scratches)// Connect to the store on mount, disconnect on unmount, catch state-changes in a referenceuseEffect(()=>useStore.subscribe(scratches=>(scratchRef.current=scratches),state=>state.scratches),[])

Sick of reducers and changing nested state? Use Immer!

importproducefrom'immer'constuseStore=create(set=>({lush:{forest:{contains:{a:"bear"}}},clearForest:()=>set(produce(state=>{state.lush.forest.contains=null}))}))constclearForest=useStore(state=>state.clearForest)clearForest();

Middleware

// Log every time state is changedconstlog=config=>(set,get,api)=>config(args=>{console.log("  applying",args)set(args)console.log("  new state",get())},get,api)// Turn the set method into an immer proxyconstimmer=config=>(set,get,api)=>config((partial,replace)=>{constnextState=typeofpartial==='function'      ?produce(partial)      :partialreturnset(nextState,replace)},get,api)constuseStore=create(log(immer((set)=>({bees:false,setBees:(input)=>set((state)=>void(state.bees=input)),})),),)

Persist middleware

importcreatefrom"zustand"import{persist}from"zustand/middleware"exportconstuseStore=create(persist((set,get)=>({fishes:0,addAFish:()=>set({fishes:get().fishes+1})}),{name:"food-storage",// unique namegetStorage:()=>sessionStorage,// (optional) by default the 'localStorage' is used}))

Can't live without redux-like reducers and action types?

consttypes={increase:"INCREASE",decrease:"DECREASE"}constreducer=(state,{ type, by=1})=>{switch(type){casetypes.increase:return{grumpiness:state.grumpiness+by}casetypes.decrease:return{grumpiness:state.grumpiness-by}}}constuseStore=create(set=>({grumpiness:0,dispatch:args=>set(state=>reducer(state,args)),}))constdispatch=useStore(state=>state.dispatch)dispatch({type:types.increase,by:2})

import{redux}from'zustand/middleware'constuseStore=create(redux(reducer,initialState))

Calling actions outside a React event handler

import{unstable_batchedUpdates}from'react-dom'// or 'react-native'constuseStore=create((set)=>({fishes:0,increaseFishes:()=>set((prev)=>({fishes:prev.fishes+1}))}))constnonReactCallback=()=>{unstable_batchedUpdates(()=>{useStore.getState().increaseFishes()})}

Redux devtools

import{devtools}from'zustand/middleware'// Usage with a plain action store, it will log actions as "setState"constuseStore=create(devtools(store))// Usage with a redux store, it will log full action typesconstuseStore=create(devtools(redux(reducer,initialState)))

React context

importcreatefrom'zustand'importcreateContextfrom'zustand/context'const{ Provider, useStore}=createContext()constcreateStore=()=>create(...)constApp=()=>(<ProvidercreateStore={createStore}>    ...</Provider>)constComponent=()=>{conststate=useStore()constslice=useStore(selector)...}

Typing your store andcombine middleware

// You can use `type`typeBearState={bears:numberincrease:(by:number)=>void}// Or `interface`interfaceBearState{bears:numberincrease:(by:number)=>void}// And it is going to work for bothconstuseStore=create<BearState>(set=>({bears:0,increase:(by)=>set(state=>({bears:state.bears+by})),}))

import{combine}from'zustand/middleware'constuseStore=create(combine({bears:0},(set)=>({increase:(by:number)=>set((state)=>({bears:state.bears+by}))})),)

Best practices

Testing

3rd-Party Libraries

Comparison with other libraries