zustand-5_skill

Overview

This skill documents practical Zustand 5 state management patterns for React apps, covering basic stores, persistence, selectors, async actions, slices, Immer, DevTools, and usage outside React. It focuses on patterns that reduce re-renders, improve testability, and scale state logic across components. Use it as a quick reference to implement common store features and recommended practices.

How this skill works

The skill explains how to create typed stores with create(), compose slices to build larger stores, and apply middlewares like persist, immer, and devtools. It demonstrates selector usage to avoid unnecessary re-renders, async action patterns for data fetching, and how to read/subscribe to state outside React components. Examples show minimal, composable code you can drop into your project.

When to use it

• Local or global React state that needs to be simple, fast, and predictable
• When you want persisted settings like theme or language across sessions
• To split large state into focused slices for maintainability and reuse
• When you need immutable updates with a simple API using Immer
• When you need to debug state changes with Redux DevTools
• Accessing or subscribing to state from non-React code (e.g., utilities)

Best practices

• Select only the fields a component needs to prevent unnecessary re-renders
• Use useShallow for multiple fields to avoid deep equality costs
• Compose store logic with slices to keep code modular and testable
• Wrap async flows in actions that set loading/error states for UI feedback
• Persist only necessary keys and avoid storing large transient data
• Use immer middleware for ergonomic mutations when complex nested updates exist

Example use cases

• A counter component with increment/decrement/reset backed by a simple store
• User settings persisted to localStorage: theme and language across reloads
• User profile fetch with loading and error handling implemented as an async action
• A shopping cart built from cart and user slices combined into one store
• Todo list using Immer to mutate nested arrays while keeping immutability
• Inspecting and subscribing to store changes from a non-React background task