← ClaudeAtlas

rn-async-patternslisted

Async/await correctness in React Native with Zustand. Use when debugging race conditions, missing awaits, floating promises, or async timing issues in Expo/React Native apps.
aiskillstore/marketplace · ★ 329 · AI & Automation · score 79
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