1---
2title: Use nextTick() to Wait for DOM Updates
3impact: MEDIUM
4impactDescription: DOM updates are batched and asynchronous - direct DOM access after state changes sees stale values
5type: capability
6tags: [vue3, dom, nextTick, reactivity, async]
7---
8 
9# Use nextTick() to Wait for DOM Updates
10 
11**Impact: MEDIUM** - Vue batches DOM updates asynchronously for performance. If you access the DOM immediately after changing reactive state, you'll see the old values. Use `nextTick()` to wait for the DOM to update.
12 
13When you modify reactive state, Vue doesn't update the DOM synchronously. Instead, it buffers changes and applies them in the next "tick" of the event loop. This is a performance optimization, but it can cause bugs when you need to read from or manipulate the DOM after state changes.
14 
15## Task Checklist
16 
17- [ ] Use `await nextTick()` when you need to access updated DOM elements after state changes
18- [ ] Use `nextTick()` when measuring DOM elements (heights, widths) after data changes
19- [ ] Use `nextTick()` when focusing inputs or scrolling after content updates
20- [ ] Consider if you really need DOM access - often you can work with reactive data instead
21 
22**Incorrect:**
23```javascript
24import { ref } from 'vue'
25 
26const message = ref('Hello')
27const messageEl = ref(null)
28 
29function updateMessage() {
30  message.value = 'Updated!'
31 
32  // WRONG: DOM still shows "Hello" at this point
33  console.log(messageEl.value.textContent) // "Hello" - stale!
34 
35  // WRONG: Scrolling/focusing may not work correctly
36  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
37}
38```
39 
40**Correct:**
41```javascript
42import { ref, nextTick } from 'vue'
43 
44const message = ref('Hello')
45const messageEl = ref(null)
46 
47async function updateMessage() {
48  message.value = 'Updated!'
49 
50  // CORRECT: Wait for DOM to update
51  await nextTick()
52 
53  // Now the DOM is updated
54  console.log(messageEl.value.textContent) // "Updated!"
55 
56  // Scrolling and focusing now work correctly
57  scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
58}
59 
60// Alternative: callback syntax
61function updateWithCallback() {
62  message.value = 'Updated!'
63 
64  nextTick(() => {
65    console.log(messageEl.value.textContent) // "Updated!"
66  })
67}
68```
69 
70```vue
71<script setup>
72import { ref, nextTick } from 'vue'
73 
74const items = ref([])
75const listRef = ref(null)
76 
77async function addItem() {
78  items.value.push({ id: Date.now(), text: 'New item' })
79 
80  await nextTick()
81 
82  // Now we can safely scroll to the new item
83  listRef.value.lastElementChild?.scrollIntoView({ behavior: 'smooth' })
84}
85</script>
86```
87 
88## Reference
89- [Vue.js Reactivity Fundamentals - DOM Update Timing](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#dom-update-timing)
90- [Vue.js nextTick API](https://vuejs.org/api/general.html#nexttick)
91