Zustand

A small, fast and scalable bearbones state-management solution

Zustand is a simple and performant state management library for React applications. It has a minimal API, is easy to learn, and doesn't require boilerplate code.

Get StartedView Documentation

Why Choose Zustand?

⚑

Simple & Minimal

No providers, no context, just pure React hooks. Simple API that's easy to learn and use.

πŸš€

Fast & Performant

Optimized for performance with automatic render optimization and minimal re-renders.

πŸ“ˆ

Scalable

Works great for small apps and scales effortlessly to large, complex applications.

🎯

TypeScript First

Built with TypeScript in mind, providing excellent type inference and developer experience.

πŸ”§

DevTools Support

Integrate with Redux DevTools for easy debugging and state inspection.

πŸ”Œ

Flexible Middleware

Extend functionality with middleware for persistence, devtools, and more.

Quick Start

1

Install Zustand

npm install zustand
2

Create a store

import { create } from 'zustand'

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

Use the store in your components

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

Ready to get started?

Explore our comprehensive documentation and tutorials to master Zustand.

Start Learning