1---
2title: Understand Reactive Updates are Batched Per Event Loop Tick
3impact: MEDIUM
4impactDescription: Multiple synchronous reactive changes are batched - watchers only see the final value, not intermediate states
5type: gotcha
6tags: [vue3, reactivity, batching, event-loop, watchers, nextTick]
7---
8 
9# Understand Reactive Updates are Batched Per Event Loop Tick
10 
11**Impact: MEDIUM** - Vue batches multiple reactive state changes that happen synchronously within the same event loop tick. Watchers and computed properties only see the final state, not intermediate values. This is an optimization, but it can be surprising if you expect watchers to fire for each individual change.
12 
13Understanding this behavior is essential for debugging scenarios where you expect to observe every state transition.
14 
15## Task Checklist
16 
17- [ ] Understand watchers fire once per tick with final value, not for each mutation
18- [ ] Use `nextTick()` if you need to ensure DOM updates between state changes
19- [ ] Use `flush: 'sync'` on watchers only if you absolutely need immediate execution
20- [ ] For intermediate value tracking, consider logging or explicit state snapshots
21 
22**Example of batching behavior:**
23```javascript
24import { ref, watch } from 'vue'
25 
26const count = ref(0)
27 
28watch(count, (newValue) => {
29  console.log('Count changed to:', newValue)
30})
31 
32// Multiple synchronous changes in the same tick
33function multipleUpdates() {
34  count.value = 1
35  count.value = 2
36  count.value = 3
37  count.value = 4
38}
39 
40multipleUpdates()
41// Console output: "Count changed to: 4"
42// NOT: 1, 2, 3, 4 - only the final value is observed!
43```
44 
45**The console logs you WON'T see:**
46```javascript
47const items = reactive([])
48 
49watch(items, (newItems) => {
50  console.log('Items count:', newItems.length)
51})
52 
53// Batch of changes
54items.push('a')  // length: 1
55items.push('b')  // length: 2
56items.push('c')  // length: 3
57 
58// Output: "Items count: 3"
59// You won't see 1, 2, 3 logged separately
60```
61 
62**Using flush: 'sync' for immediate watching (use with caution):**
63```javascript
64import { ref, watch } from 'vue'
65 
66const count = ref(0)
67 
68// Sync watcher fires immediately on each change
69watch(count, (newValue) => {
70  console.log('Immediate:', newValue)
71}, { flush: 'sync' })
72 
73count.value = 1  // Logs: "Immediate: 1"
74count.value = 2  // Logs: "Immediate: 2"
75count.value = 3  // Logs: "Immediate: 3"
76 
77// WARNING: flush: 'sync' can cause performance issues
78// and creates less predictable behavior. Avoid if possible.
79```
80 
81**Using nextTick to separate batches:**
82```javascript
83import { ref, watch, nextTick } from 'vue'
84 
85const count = ref(0)
86 
87watch(count, (newValue) => {
88  console.log('Count:', newValue)
89})
90 
91async function separatedUpdates() {
92  count.value = 1
93  await nextTick()  // Force flush
94  // Output: "Count: 1"
95 
96  count.value = 2
97  await nextTick()
98  // Output: "Count: 2"
99 
100  count.value = 3
101  // Output: "Count: 3"
102}
103```
104 
105**Practical example - form validation:**
106```javascript
107const formData = reactive({
108  email: '',
109  password: ''
110})
111 
112const validationErrors = ref([])
113 
114// This watcher only fires once, with final form state
115watch(formData, (data) => {
116  // Runs once after all fields are updated
117  validateForm(data)
118}, { deep: true })
119 
120// When user submits, you might update multiple fields
121function populateFromSavedData(saved) {
122  formData.email = saved.email
123  formData.password = saved.password
124  // Validation runs once with both fields set
125}
126```
127 
128**When batching helps performance:**
129```javascript
130// Without batching, this would trigger 1000 watcher/render cycles
131const list = reactive([])
132 
133function addManyItems() {
134  for (let i = 0; i < 1000; i++) {
135    list.push(i)
136  }
137}
138// With batching: renders once with all 1000 items
139// Without batching: would render 1000 times!
140```
141 
142**Debugging intermediate states:**
143```javascript
144// If you need to observe every change for debugging:
145import { ref, watch } from 'vue'
146 
147const count = ref(0)
148 
149// Method 1: Sync watcher (not recommended for production)
150watch(count, (val) => console.log('DEBUG:', val), { flush: 'sync' })
151 
152// Method 2: Track history manually
153const history = []
154const originalSet = count.value
155Object.defineProperty(count, 'value', {
156  set(val) {
157    history.push(val)
158    originalSet.call(this, val)
159  }
160})
161```
162 
163## Reference
164- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)
165- [Vue.js Watchers - Callback Flush Timing](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing)
166- [Vue.js nextTick()](https://vuejs.org/api/general.html#nexttick)
167