Zustand for Beginners — Simple State Management in React

Zustand is a lightweight state management library for React that’s gaining popularity. Here’s a beginner’s guide.

What is Zustand?

Zustand (German for “state”) is a small, fast, and scalable state management solution for React. Compared to Redux, it requires significantly less boilerplate.

Why Zustand?

• Minimal boilerplate - No actions, reducers, or dispatch
• Simple API - Learn in minutes
• TypeScript friendly - Great type inference
• No providers - No wrapping your app
• Performance - Only re-renders when state changes

Basic Setup

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

Using in Components

function Counter() {
  const { count, increment, decrement } = useStore()
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

Advanced: Async Actions

const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const response = await fetch('/api/users')
    set({ users: await response.json() })
  },
}))

Conclusion

Zustand is a great choice for React state management. Start simple and scale as needed.