Prevent stale asynchronous results from replacing current state

Understand the likely causes

• Concurrent reads may resolve out of order; the loader may ignore abort or complete before it is observed; cleanup can be registered too late; or account and route scope may be absent from publication rules. A shared loading flag can also be cleared by the wrong operation. Cancellation and current-result validation are related but separate controls.

Record identity and publication order

Use synthetic ids to trace start, invalidation, completion, and state publication for each operation. Record the relevant query, route, account scope, and owner without logging private content or credentials. Reproduce with a fake loader whose completions can be reversed deliberately. Distinguish an obsolete response from an active operation’s real failure. Do not contact a production endpoint to create the race. The course’s pure latest-result example verifies one local publication policy, while the watcher integration still needs a compatible Vue test environment.

Register cleanup before awaiting work

The illustrative watcher uses a cleanup flag to reject obsolete publication. An abort-capable loader can also receive a signal to stop wasted work, but the guard remains necessary when cancellation races or is unsupported. Vue 3.5’s onWatcherCleanup must be registered synchronously; the callback-provided cleanup below also makes invalidation explicit. Watch the task source rather than an already-read primitive. The injected load function is an application contract and must classify its own data and transport behavior; no real request is executed by this guide.

import { ref, watch } from "vue"

export function useLatestValue(source, load) {
  const state = ref({ status: "idle", value: null })
  watch(source, async (input, _old, onCleanup) => {
    let current = true
    onCleanup(() => { current = false })
    state.value = { ...state.value, status: "loading" }
    try {
      const value = await load(input)
      if (current) state.value = { status: "ready", value }
    } catch {
      if (current) state.value = { ...state.value, status: "failed" }
    }
  })
  return { state }
}

Separate read freshness from write consistency

Make loading and error updates belong to the same identity as the data result, and include account or route changes in invalidation where required. A generation token can protect code paths that are not naturally owned by one watcher. For writes, aborting the client does not reverse a server action already accepted. Preserve ambiguous outcomes and use the backend’s documented idempotency and reconciliation contract. Retrying with a fresh operation identity can duplicate effects. Do not reuse a read-cancellation helper as a universal write-safety mechanism.

Keep it from recurring

• Define async ownership, result identity, cancellation, error mapping, and retry semantics when introducing a data feature. Use deterministic fake outcomes instead of sleeps. Review cleanup registration against the Vue version and avoid creating unmanaged watchers in later callbacks. Validate remote data before accepting it and keep private payloads out of race diagnostics.