# Build Reliable React Native Zustand Stores

React Native teams often lose time on stale state, async action timing, and avoidable renders. This skill provides Zustand patterns that make store behavior easier to reason about, test, and debug.

## Install

```bash
npx skillstore add cjharmath/rn-zustand-patterns
```

## Metadata

- Status: approved
- Slug: cjharmath-rn-zustand-patterns
- Skillstore revision: r1
- Version status: missing
- Tree hash: f216689732f81d730b74ad81822f504eb1ff57ae737bc4cb17cf3e05181262fb
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-zustand-patterns
- Ref: dd4a3ef9f20ddf38830950b4bb713df96b431fd6
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-rn-zustand-patterns
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-rn-zustand-patterns/manifest

## Capabilities

- Explains how synchronous store updates interact with batched React renders.
- Shows how to avoid stale closures with current store reads after async waits.
- Compares async action patterns that callers can await and test.
- Covers selector stability, shallow comparisons, and Zustand 5 migration notes.
- Describes derived state, subscriptions, testing resets, and debugging with devtools.
- Provides focused examples for React Native assessment or form state flows.

## Use Cases

- Fix Async Store Bugs: A mobile developer can diagnose stale values after awaits and keep store actions awaitable.
- Review Store Architecture: A lead engineer can compare selector and derived state choices before refactoring shared stores.
- Improve Test Coverage: A QA-focused developer can plan reset helpers and assertions for async state flows.

## Prompt Templates

### Explain Zustand Timing

```
Explain why a Zustand store update can be synchronous while a React Native component still shows old state. Use simple examples.
```

### Fix Stale State

```
Review my React Native Zustand action for stale closures after await. Suggest current-state reads and explain each change.
```

### Refactor Selectors

```
Assess these selectors for avoidable re-renders. Recommend shallow comparison, separate selectors, or useShallow where appropriate.
```

### Design Store Test Strategy

```
Create a test strategy for a complex Zustand store with async actions, reset helpers, subscriptions, and derived state. Include edge cases.
```

## Limitations

- Does not install packages, run commands, or inspect a live project by itself.
- Assumes the user already uses React Native and Zustand.
- Examples are illustrative and need adaptation for each store shape.
- Does not cover every middleware, persistence library, or server state tool.

## Best Practices

- Read current store state after async waits when freshness matters.
- Keep derived values computed from source state unless storage is required.
- Use stable selectors to avoid unnecessary React Native renders.

## Anti Patterns

- Assuming component state updates immediately after every store write.
- Returning new selector objects on each render without shallow comparison.
- Making async store actions unawaitable when callers need completion.

## Security Audit

- Audited at: 2026-07-06T05:53:56.113\+00:00
- Summary: All static findings are false positives caused by Markdown formatting, TypeScript example code, placeholder API calls, and Object.keys usage. No prompt injection, exfiltration intent, executable scripts, or real certificate or private key material was found in SKILL.md.

## Stats

- Views: 259
- Downloads: 11
- Favorites: 0
- Popularity score: 0