zustand-5

Demonstrate Zustand 5 patterns for React state management with TypeScript.

Updated Mar 10, 2025

Search Tags:#typescript #store #react #middleware #zustand #state-management #selectors

Ready to run

npx skills add https://github.com/alvaldes/alvaldes.dots --skill zustand-5-alvaldes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zustand-5
Source: https://github.com/alvaldes/alvaldes.dots/tree/main/opencode/skill/zustand-5
Command: npx skills add https://github.com/alvaldes/alvaldes.dots --skill zustand-5-alvaldes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing React state with simple, scalable patterns can lead to boilerplate and fragility. Zustand-5 demonstrates a collection of proven patterns to structure and evolve state logic cleanly.

Core Features & Use Cases

Basic Store: small, fully typed store with increment, decrement, and reset.
Persist Middleware: persists state to localStorage so users don't lose preferences.
Selectors: pick only needed fields to minimize re-renders, with shallow comparison for multi-field reads.
Async Actions: fetch and manage async data with loading and error handling.
Slices Pattern: compose multiple slices into a single store for modularity.
Immer Middleware: write mutations directly and have them applied immutably.
DevTools: integrate with DevTools for easier debugging.
Outside React: access and subscribe to store state outside React components.

Quick Start

Create a small Zustand counter store and render the count to verify functionality.

Frequently Asked Questions about zustand-5

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage React state with TypeScript using Zustand 5?▼

To structure React state cleanly, Zustand 5 uses a slices pattern to compose multiple modular state slices into a single store, preventing boilerplate and fragility as your application grows.

What is the best way to persist React state to localStorage in Zustand?▼

The best way to persist React state to localStorage is by applying the persist middleware to your Zustand store, ensuring users do not lose their preferences across sessions.

How do I prevent unnecessary re-renders when reading multiple state fields in Zustand?▼

To prevent unnecessary re-renders, use Zustand selectors to pick only the needed fields and apply shallow comparison when reading multiple state fields simultaneously.

Can I update Zustand state immutably without writing manual spread operators?▼

Yes, you can update state immutably by integrating the Immer middleware, which allows you to write mutations directly while Zustand handles applying them immutably.

How do I access Zustand store state outside of React components?▼

You can access and subscribe to Zustand store state outside of React components using the store's built-in subscription methods, enabling state interaction in utility modules.