zustand-pro

• SKILL.mdcore · 4,691 bytes

# Zustand Pro

A practical guide to Zustand: minimal, hook-based React state management — store creation, selector subscriptions, slices, middleware (persist, devtools, immer), and async actions — without boilerplate.

## Overview

Zustand is a tiny store with a simple contract: `create(set => ({...}))` gives you a hook. Components subscribe to **slices** via selectors and re-render only when their slice changes. No providers (usually), no reducers, no ceremony. It's the right default for client state (UI state, auth session, feature flags, form drafts) in most React apps — reach for Redux only when you need its ecosystem or strict conventions at scale.

## When to use

- Client/UI state: modals, toasts, theme, sidebar, auth user.
- Replacing prop drilling or Context for frequently-updated state.
- Persisting state to localStorage (persist middleware).
- Async flows in the store (fetch + set, with loading states).