# Improve React Zustand Store Patterns

React teams can hit stale state, render timing, and async action bugs when using Zustand. This skill gives direct patterns for stores, selectors, derived state, testing, debugging, and persistence.

## Install

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

## Metadata

- Status: approved
- Slug: cjharmath-react-zustand-patterns
- Skillstore revision: r1
- Version status: missing
- Tree hash: 39fbb645d8369f090aefa4bbe6f13e4aafde68b824318e144a19025b29547915
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-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-react-zustand-patterns
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-react-zustand-patterns/manifest

## Capabilities

- Explains why Zustand set updates synchronously while React renders later.
- Shows how get and getState avoid stale closures after async work.
- Compares selector patterns that reduce unnecessary React re-renders.
- Describes derived state, subscriptions, testing resets, debugging, and persistence.
- Includes migration notes for Zustand 4.x and 5.x shallow selector APIs.

## Use Cases

- Debug stale React state: Use the timing patterns to explain why store values update before components re-render.
- Design async store actions: Use the async action guidance to make loading, data, and error state easier to reason about.
- Review Zustand migrations: Use the selector and migration notes when moving stores from Zustand 4.x to 5.x.

## Prompt Templates

### Explain store timing

```
Explain why my React component still shows old Zustand state after I call set. Keep the explanation practical.
```

### Fix stale closures

```
Review this Zustand action for stale closure problems after await. Suggest where get or getState should be used.
```

### Improve selectors

```
Review my Zustand selectors for unnecessary re-renders. Recommend multiple selectors, shallow comparison, or useShallow where appropriate.
```

### Audit store architecture

```
Audit this Zustand store design for async races, derived state, selector stability, persistence boundaries, and test reset strategy.
```

## Limitations

- It is documentation only and does not inspect a project automatically.
- It does not generate a full application architecture by itself.
- It assumes users already use React or React Native with Zustand.
- It does not cover every Zustand middleware or ecosystem package.

## Best Practices

- Read current store state after await when correctness depends on fresh values.
- Keep derived values in selectors unless storing them avoids real repeated work.
- Reset store state explicitly in tests before each case.

## Anti Patterns

- Do not assume a React component has re-rendered immediately after a store update.
- Do not return fresh selector objects without shallow comparison or useShallow.
- Do not persist an entire store when only a small state slice is needed.

## Security Audit

- Audited at: 2026-07-06T05:21:04.744\+00:00
- Summary: All static findings are false positives caused by Markdown code fences, inline code, and illustrative Zustand examples. The skill contains guidance text only; no executable shell commands or live network behavior were found in SKILL.md. No prompt injection language or suspicious intent was identified.

## Stats

- Views: 249
- Downloads: 13
- Favorites: 1
- Popularity score: 0