# Fix React Async Bugs

Async React bugs create race conditions, missed state updates, and unreliable effects. This skill guides reviews, fixes, and lint rules for safer async code.

## Install

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

## Metadata

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

## Capabilities

- Identifies floating promise risks in TypeScript and TSX code reviews.
- Explains post-condition validation after async state changes.
- Compares sequential and parallel async execution with Promise.all.
- Shows safe async patterns for React useEffect cleanup and AbortController.
- Recommends TanStack Query for data fetching and mutation flows.
- Provides ESLint rules for async promise correctness.

## Use Cases

- Review Feature Code: Find floating promises, missed awaits, and unsafe ordering before a React feature ships.
- Stabilize Mobile Effects: Apply cleanup and cancellation patterns to React Native screens that load async data.
- Create Async Review Standards: Define lint rules and checklist items for teams that maintain TypeScript React apps.

## Prompt Templates

### Review Async Code

```
Review this React component for async bugs. Find floating promises, race conditions, and missing post-condition checks. Suggest focused fixes.
```

### Fix Effect Timing

```
Analyze this useEffect flow. Explain where unmounts or dependency changes can race. Recommend cancellation or AbortController changes.
```

### Audit Zustand Actions

```
Inspect these Zustand actions. Identify hidden async behavior, missing awaits, and state assumptions. Propose safer action signatures.
```

### Design Async Flow

```
Design an async data flow for this React feature. Decide what should be sequential, parallel, or handled by TanStack Query. Explain tradeoffs.
```

## Limitations

- It provides guidance only and does not execute lint checks by itself.
- It assumes React, React Native, TypeScript, or Zustand context.
- It does not replace runtime testing for timing-sensitive bugs.
- It does not design full data fetching architecture beyond listed patterns.

## Best Practices

- Enable TypeScript ESLint promise rules before reviewing async code manually.
- Validate state after critical loads before dependent actions continue.
- Use AbortController or cancellation flags for effects that load data.

## Anti Patterns

- Calling promise-returning functions without awaiting, returning, or documenting background execution.
- Running dependent async steps inside Promise.all.
- Making a useEffect callback async directly instead of wrapping the async work.

## Security Audit

- Audited at: 2026-07-06T05:08:06.295\+00:00
- Summary: All static findings are false positives caused by Markdown code fences, inline backticks, and illustrative React or TypeScript examples. The fetch example demonstrates AbortController cleanup in application code, and the sensitive-key finding is an Object.keys substring match. No prompt injection, data exfiltration, or auto-executing behavior was found.

## Stats

- Views: 269
- Downloads: 8
- Favorites: 0
- Popularity score: 0