1---
2title: Avoid Expensive Operations in Updated Hook
3impact: MEDIUM
4impactDescription: Heavy computations in updated hook cause performance bottlenecks and potential infinite loops
5type: capability
6tags: [vue3, vue2, lifecycle, updated, performance, optimization, reactivity]
7---
8 
9# Avoid Expensive Operations in Updated Hook
10 
11**Impact: MEDIUM** - The `updated` hook runs after every reactive state change that causes a re-render. Placing expensive operations, API calls, or state mutations here can cause severe performance degradation, infinite loops, and dropped frames below the optimal 60fps threshold.
12 
13Use `updated`/`onUpdated` sparingly for post-DOM-update operations that cannot be handled by watchers or computed properties. For most reactive data handling, prefer watchers (`watch`/`watchEffect`) which provide more control over what triggers the callback.
14 
15## Task List
16 
17- Never perform API calls in updated hook
18- Never mutate reactive state inside updated (causes infinite loops)
19- Use conditional checks to verify updates are relevant before acting
20- Prefer `watch` or `watchEffect` for reacting to specific data changes
21- Use throttling/debouncing if updated operations are expensive
22- Reserve updated for low-level DOM synchronization tasks
23 
24**BAD:**
25```javascript
26// BAD: API call in updated - fires on every re-render
27export default {
28  data() {
29    return { items: [], lastUpdate: null }
30  },
31  updated() {
32    // This runs after every single state change!
33    fetch('/api/sync', {
34      method: 'POST',
35      body: JSON.stringify(this.items)
36    })
37  }
38}
39```
40 
41```javascript
42// BAD: State mutation in updated - infinite loop
43export default {
44  data() {
45    return { renderCount: 0 }
46  },
47  updated() {
48    // This causes another update, which triggers updated again!
49    this.renderCount++ // Infinite loop
50  }
51}
52```
53 
54```javascript
55// BAD: Heavy computation on every update
56export default {
57  updated() {
58    // Expensive operation runs on every keystroke, every state change
59    this.processedData = this.heavyComputation(this.rawData)
60    this.analytics = this.calculateMetrics(this.allData)
61  }
62}
63```
64 
65**GOOD:**
66```javascript
67import debounce from 'lodash-es/debounce'
68 
69// GOOD: Use watcher for specific data changes
70export default {
71  data() {
72    return { items: [] }
73  },
74  watch: {
75    // Only fires when items actually changes
76    items: {
77      handler(newItems) {
78        this.syncToServer(newItems)
79      },
80      deep: true
81    }
82  },
83  methods: {
84    syncToServer: debounce(function(items) {
85      fetch('/api/sync', {
86        method: 'POST',
87        body: JSON.stringify(items)
88      })
89    }, 500)
90  }
91}
92```
93 
94```vue
95<!-- GOOD: Composition API with targeted watchers -->
96<script setup>
97import { ref, watch, onUpdated } from 'vue'
98import { useDebounceFn } from '@vueuse/core'
99 
100const items = ref([])
101const scrollContainer = ref(null)
102 
103// Watch specific data - not all updates
104watch(items, (newItems) => {
105  syncToServer(newItems)
106}, { deep: true })
107 
108const syncToServer = useDebounceFn((items) => {
109  fetch('/api/sync', { method: 'POST', body: JSON.stringify(items) })
110}, 500)
111 
112// Only use onUpdated for DOM synchronization
113onUpdated(() => {
114  // Scroll to bottom only if content changed height
115  if (scrollContainer.value) {
116    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
117  }
118})
119</script>
120```
121 
122```javascript
123// GOOD: Conditional check in updated hook
124export default {
125  data() {
126    return {
127      content: '',
128      lastSyncedContent: ''
129    }
130  },
131  updated() {
132    // Only act if specific condition is met
133    if (this.content !== this.lastSyncedContent) {
134      this.syncContent()
135      this.lastSyncedContent = this.content
136    }
137  },
138  methods: {
139    syncContent: debounce(function() {
140      // Sync logic
141    }, 300)
142  }
143}
144```
145 
146## Valid Use Cases for Updated Hook
147 
148```javascript
149// GOOD: Low-level DOM synchronization
150export default {
151  updated() {
152    // Sync third-party library with Vue's DOM
153    this.thirdPartyWidget.refresh()
154 
155    // Update scroll position after content change
156    this.$nextTick(() => {
157      this.maintainScrollPosition()
158    })
159  }
160}
161```
162 
163## Prefer Computed Properties for Derived Data
164 
165```javascript
166// BAD: Calculating derived data in updated
167export default {
168  data() {
169    return { numbers: [1, 2, 3, 4, 5] }
170  },
171  updated() {
172    this.sum = this.numbers.reduce((a, b) => a + b, 0) // Causes another update!
173  }
174}
175 
176// GOOD: Use computed property instead
177export default {
178  data() {
179    return { numbers: [1, 2, 3, 4, 5] }
180  },
181  computed: {
182    sum() {
183      return this.numbers.reduce((a, b) => a + b, 0)
184    }
185  }
186}
187```
188