1---
2title: Clean Up Async Operations in Watchers to Prevent Race Conditions
3impact: HIGH
4impactDescription: Stale async requests can overwrite newer data, causing incorrect UI state and hard-to-debug issues
5type: capability
6tags: [vue3, watch, watchers, async, cleanup, race-condition, abort]
7---
8 
9# Clean Up Async Operations in Watchers to Prevent Race Conditions
10 
11**Impact: HIGH** - When a watched value changes rapidly, multiple async operations run concurrently. Without cleanup, a slow earlier request can complete after a faster later request, overwriting current data with stale results.
12 
13Always use `onWatcherCleanup` or the `onCleanup` callback parameter to cancel pending async operations when the watcher re-runs or the component unmounts.
14 
15## Task Checklist
16 
17- [ ] Use `onWatcherCleanup()` or `onCleanup` parameter in async watchers
18- [ ] Use `AbortController` to cancel pending fetch requests
19- [ ] Cancel any setTimeout/setInterval calls in cleanup
20- [ ] Invalidate previous async operation results with flags
21- [ ] Consider debouncing rapid changes before fetching
22 
23**Incorrect:**
24```javascript
25import { ref, watch } from 'vue'
26 
27const searchQuery = ref('')
28const results = ref([])
29 
30// BAD: Race condition - slow request for "a" can finish after fast request for "ab"
31watch(searchQuery, async (query) => {
32  if (query) {
33    const response = await fetch(`/api/search?q=${query}`)
34    results.value = await response.json()  // May overwrite newer results!
35  }
36})
37 
38// BAD: No cleanup for timeouts
39watch(searchQuery, (query) => {
40  // Previous timeout keeps running even when query changes
41  setTimeout(() => {
42    performExpensiveSearch(query)
43  }, 500)
44})
45```
46 
47**Correct:**
48```javascript
49import { ref, watch, onWatcherCleanup } from 'vue'
50 
51const searchQuery = ref('')
52const results = ref([])
53const loading = ref(false)
54 
55// CORRECT: Using onWatcherCleanup (Vue 3.5+)
56watch(searchQuery, async (query) => {
57  if (!query) {
58    results.value = []
59    return
60  }
61 
62  const controller = new AbortController()
63 
64  // Register cleanup to abort on re-run or unmount
65  onWatcherCleanup(() => {
66    controller.abort()
67  })
68 
69  loading.value = true
70  try {
71    const response = await fetch(`/api/search?q=${query}`, {
72      signal: controller.signal
73    })
74    results.value = await response.json()
75  } catch (err) {
76    if (err.name !== 'AbortError') {
77      console.error('Search failed:', err)
78    }
79  } finally {
80    loading.value = false
81  }
82})
83```
84 
85## Using onCleanup Parameter
86 
87```javascript
88import { ref, watch } from 'vue'
89 
90const userId = ref(1)
91const userData = ref(null)
92 
93// CORRECT: Using onCleanup callback parameter
94watch(userId, (newId, oldId, onCleanup) => {
95  const controller = new AbortController()
96 
97  fetch(`/api/users/${newId}`, { signal: controller.signal })
98    .then(res => res.json())
99    .then(data => {
100      userData.value = data
101    })
102    .catch(err => {
103      if (err.name !== 'AbortError') {
104        console.error(err)
105      }
106    })
107 
108  onCleanup(() => {
109    controller.abort()
110  })
111})
112```
113 
114## Cleanup with Timeouts
115 
116```javascript
117import { ref, watch, onWatcherCleanup } from 'vue'
118 
119const input = ref('')
120 
121// CORRECT: Cancel previous timeout on new input
122watch(input, (value) => {
123  const timeoutId = setTimeout(() => {
124    performExpensiveOperation(value)
125  }, 300)
126 
127  onWatcherCleanup(() => {
128    clearTimeout(timeoutId)
129  })
130})
131```
132 
133## Invalidation Flag Pattern
134 
135```javascript
136import { ref, watch } from 'vue'
137 
138const id = ref(1)
139const data = ref(null)
140 
141// CORRECT: Invalidation flag for non-abortable operations
142watch(id, async (newId, oldId, onCleanup) => {
143  let cancelled = false
144 
145  onCleanup(() => {
146    cancelled = true
147  })
148 
149  const result = await someNonAbortableAsyncOperation(newId)
150 
151  // Check if this watch run is still valid
152  if (!cancelled) {
153    data.value = result
154  }
155})
156```
157 
158## watchEffect Cleanup
159 
160```javascript
161import { ref, watchEffect, onWatcherCleanup } from 'vue'
162 
163const resourceId = ref('abc')
164 
165watchEffect(async () => {
166  const id = resourceId.value
167  const controller = new AbortController()
168 
169  onWatcherCleanup(() => {
170    controller.abort()
171  })
172 
173  const data = await fetchResource(id, { signal: controller.signal })
174  processData(data)
175})
176```
177 
178## Reference
179- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)
180- [Vue.js Watchers - Side Effect Cleanup](https://vuejs.org/api/reactivity-core.html#watcheffect)
181