) ) import produce from 'immer' import create from 'zustand' import immer from 'zustand/middleware/immer' const useStore = create( immer((set) => ( todos: [], addTodo: (text) => set((state) => state.todos.push( text, done: false ) ), toggleTodo: (index) => set((state) => state.todos[index].done = !state.todos[index].done ), )) ) 3. Devtools (Redux DevTools integration) import devtools from 'zustand/middleware' const useStore = create( devtools( (set) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 ), false, 'increment'), ), name: 'MyAppStore' ) ) 4. Combining Multiple Middlewares import create from 'zustand' import persist, devtools, immer from 'zustand/middleware' const useStore = create( devtools( persist( immer((set) => ( user: null, login: (userData) => set((state) => state.user = userData ), )), name: 'user-storage' ), name: 'UserStore' ) ) Part 4: Performance Optimizations (Full Help) 1. Automatic Selector Memoization // Good: only re-renders when bears changes const bears = useBearStore((state) => state.bears) // Bad: re-renders on every state change const bears, fish = useBearStore() 2. Using shallow for Nested Objects import shallow from 'zustand/shallow' // Without shallow – re-renders if any property changes const name, age = usePersonStore((state) => ( name: state.name, age: state.age ), shallow) // shallow prevents unnecessary re-renders 3. Creating Custom Hooks per Slice const useStore = create((set) => ( user: name: 'John', age: 30 , posts: [], comments: [] )) // Custom selectors const useUserName = () => useStore((state) => state.user.name) const useUserAge = () => useStore((state) => state.user.age) 4. Preventing Re-renders with useRef import useRef from 'react' import useStore from './store' function Component() // This won't cause re-renders const storeRef = useRef(useStore.getState())
If you intended a different keyword, please provide a correction, and I will rewrite the article accordingly. Introduction: Why Zustand? In the React ecosystem, state management has long been dominated by Redux, MobX, and Context API. However, developers have increasingly gravitated toward Zustand (German for "state") because of its minimalist API, lack of boilerplate, and high performance. zust4help full
// store/index.js import create from 'zustand' import createUserSlice from './slices/userSlice' import createCartSlice from './slices/cartSlice' ) ) import produce from 'immer' import create
const useStore = create((...args) => ( ...createUserSlice(...args), ...createCartSlice(...args) )) Zustand’s true strength comes from its middleware ecosystem. 1. Persist Middleware (localStorage) import create from 'zustand' import persist, createJSONStorage from 'zustand/middleware' const useStore = create( persist( (set) => ( theme: 'light', setTheme: (theme) => set( theme ), ), Automatic Selector Memoization // Good: only re-renders when
import createStore from 'zustand/vanilla' const store = createStore((set) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), ))
const useStore = create((set, get) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), decrement: () => set((state) => ( count: state.count - 1 )), reset: () => set( count: 0 ), logAndIncrement: () => console.log(`Current count: $get().count`) set((state) => ( count: state.count + 1 )) )) Zustand handles async operations without additional middleware:
// In _app.js or layout if (typeof window === 'undefined') // Server-side: fresh store per request useStore.setState( bears: 0 )