React · apply by default

/react-async

Fix loading races, cancellation, stale responses, and async behavior

Use for request races, optimistic updates and async states; react-effects handles effect lifetime, subscriptions and cleanup.

Make it your own.

In Claude Code, use the slash command and add your context. In Codex, select react-async from the just-vibe skill picker, then send the same brief.

Version 0.11.0 also supports /jv react-async, /just-vibe react-async and /jv:react-async in Claude. See shortcut setup and context examples.

Example · apply
/just-vibe:react-async Fix out-of-order search responses overwriting newer results.
edge · apply
/just-vibe:react-async Fix search results that revert when older requests finish last.
blocked · inspect
/just-vibe:react-async Inspect async behavior without live network access; use a controlled deferred-response fixture.

What the agent does

  1. Trace resource identity, the owner of each request, component lifetime and every state publication path: loading, success, error and optimistic reconciliation. Define which completion is current after navigation, account changes or a new selection.
  2. Use the existing framework/data layer mechanism to separate stale-result suppression from actual cancellation. Shared requests may outlive one component; cancelling one subscriber must not invalidate another subscriber’s result.
  3. Guard both success and failure publication against stale identity and disposal. Clean up subscriptions/listeners on all terminal paths and prevent disposed owners from starting further work unless the lifecycle contract explicitly permits reactivation.
  4. Control completion order in tests: newer success before older success, newer success before older failure, unmount while pending and shared-request cancellation. For optimistic writes, reconcile from authoritative state after ambiguous completion instead of assuming abort undid the server effect.

Inputs

  • async interaction, request/cache layer, and observed race or loading issue.

Optional context: scope, references, constraints, successCriteria, environment, mode, budget.

Scope

Reads
Cancellation, response ownership, loading/error transitions, and optimistic recovery.
Writes
Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.
Mode
Apply; async interaction, request/cache layer, and observed race or loading issue.
Prerequisites
Component source, React/framework versions, state/data conventions, and relevant test tooling. Browser/profiler evidence is needed for measured rendering claims. Preserve existing framework and state libraries unless changing them is part of the request.

Expected output

  • Request ownership and state transitions, repair, deterministic stale-success/stale-error/disposal checks and optimistic reconciliation limits.

How the work is checked

  • Neither an older success nor an older error can replace current state. Disposal releases owned resources and prevents later publication; shared consumers remain independent.

When to stop or clarify

  • Do not assume cancellation undoes server effects. Preserve the existing fetching library unless replacement is explicitly justified in scope.

Handling missing context

Infer
Read component callers, ownership of state, installed React/framework versions and existing interaction tests.
Assume
Retain the framework and state library; preserve intended loading/error/empty behavior while resolving the named bug.
Ask
Ask when product semantics such as persistence, optimistic failure or reset behavior have conflicting evidence; missing profiler access only blocks measured performance claims.

Technical guidance

Evidence
Identify request identity, state owner, shared work lifetime and cancellation contract.
Method
Force out-of-order completion and gate writes by current identity or the established query-library guarantee.
Pitfall
Canceling one waiter must not cancel shared work still owned by another; late rejection can delete a newer cache entry.
Check
Resolve B before A, unmount before completion, and reject an old request after new success; visible state must retain the current result.

Situational decisions

When cancellation arrives after the server applied a write: Reconcile authoritative state rather than assuming the business effect was undone.

The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.

Keep exploring