react-zustand-patterns

What problem does it solve?

Zustand's lightweight store can lead to subtle bugs when React renders are batched and closures become stale. This Skill provides patterns to write predictable Zustand stores that handle synchronous updates, async actions, and selector stability.

Core Features & Use Cases

• Synchronous set awareness and batched renders with getState() for immediate reads
• Safe asynchronous actions: proper async/await usage and post-await state checks
• Selector stability: avoid re-creating objects; use multiple selectors or shallow comparisons
• Derived state in selectors rather than stored values to prevent staleness
• Store subscriptions for side effects and testing patterns

Quick Start

Create a small Zustand store in a React project and demonstrate a counter with an async update that reads the current state after awaiting.