rn-async-patternslisted
Install: claude install-skill aiskillstore/marketplace
# React Native Async Patterns
## Problem Statement
Async bugs in React Native are insidious because they often work in development but fail under load or on slower devices. The most common issues: missing `await` on async functions, race conditions between state updates, and assuming operations complete in order.
---
## Pattern: Floating Promise Detection
**Problem:** Calling an async function without `await` causes it to run in the background. If subsequent code depends on its completion, you get a race condition.
**Example (from retake bug):**
```typescript
// Before (buggy) - enableSkillAreaRetake is async but not awaited
enableSkillAreaRetake(skillArea); // Fire and forget ❌
await clearSkillAreaAnswers(skillArea); // Runs before enable completes
// After (fixed)
await enableSkillAreaRetake(skillArea); // Wait for state update ✅
await clearSkillAreaAnswers(skillArea); // Now runs in correct order
```
**Why it's subtle:** Both functions might have `async` in their signature, but only one was awaited. The code "looks right" at a glance.
**Detection:**
```bash
# Find potential floating promises - async calls without await
grep -rn "^\s*[a-zA-Z]*\s*(" --include="*.ts" --include="*.tsx" | \
grep -v "await\|return\|const\|let\|if\|else\|=>"
```
**Prevention:**
1. ESLint rule `@typescript-eslint/no-floating-promises` - catches this at lint time
2. Code review trigger: Any line calling a function that might be async without `await`, `return`, or assign