🐻

Zustand

Intermediate

A small, fast, and scalable state management solution — minimal API, no boilerplate

Zustand vs Redux

Zustand: ~1KB, no Provider needed, no actions/reducers, call store methods directly. Redux: larger ecosystem, DevTools, strict patterns. Use Zustand for most local/medium-complexity state, Redux when you need time-travel debugging, strict unidirectional flow, or team conventions. Install: npm i zustand

Basic Store — create()

beginner

Create a store with state + actions in one place. No Provider, no dispatch, no actions. Access state and methods directly.

Persist Middleware — Survives Refresh

intermediate

The persist middleware syncs your store with localStorage (or sessionStorage) automatically. State rehydrates on page load.

Immer Middleware — Mutable Syntax

intermediate

The immer middleware lets you write mutable code (like Redux Toolkit) while Immer ensures immutability behind the scenes.

subscribeWithSelector & Slice Pattern

advanced

subscribeWithSelector enables reactive subscriptions to specific state slices. The slice pattern splits large stores into composable modules.

🐻 Zustand Resources

📚Zustand Official Docs 🐙Zustand GitHub (40k+ ⭐)▶️Zustand Playground 📝Zustand vs Redux ▶️Zustand StackBlitz 📚Immer Docs