zustand

Small, fast, and scalable state management for React — bears the minimal boilerplate of Redux with none of the ceremony.

zustand

React

Small, fast, and scalable state management for React — bears the minimal boilerplate of Redux with none of the ceremony.

npm GitHub Docs

Fit

Bundle (gzip)

486 B

844 B raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Redux requires actions, reducers, selectors, and a Provider — even for a simple counter. Context API causes unnecessary re-renders whenever any part of the shared state changes.

What It Does

Zustand stores are plain JavaScript objects with methods. Components subscribe to only the slices they need using a selector, so unrelated updates never cause re-renders. No Provider, no boilerplate — just a create call and a hook.

Installation

bash

npm install zustand

Usage Example

import { create } from 'zustand';

interface BearStore {
  count: number;
  increment: () => void;
}

const useStore = create<BearStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Bears: {count}</button>;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.