react-native-zustand-patterns

What problem does it solve?

This Skill helps developers manage complex state patterns in React Native using Zustand, addressing timing details, stale closures, and async actions to prevent subtle bugs.

Core Features & Use Cases

• Synchronous set vs. batched re-renders: Leverage that set is synchronous and React re-renders are batched, ensuring a clear distinction between state updates and UI updates.
• get() after awaits: Read current state with get() after async operations to avoid capturing stale values.
• Async actions in stores: Implement robust async actions with proper try/catch handling and state guards.
• Selector stability & derived state: Use multiple selectors or shallow comparisons to minimize re-renders and keep derived values fresh.
• Store subscriptions: React to changes outside React components for persistence, analytics, or side effects.

Quick Start

Install Zustand, define a store with an async action that uses get() after awaits, and demonstrate usage in a React Native component. Quick start task: create a store with loading and data fields, implement fetchData as an async function that sets loading, awaits data fetch, then uses get() to safely update data and reset loading.