1---
2title: Unmount Hooks May Not Fire Inside Transitions During Fast Replacement
3impact: MEDIUM
4impactDescription: Components inside transitions can be destroyed without unmount hooks firing under race conditions
5type: gotcha
6tags: [vue3, lifecycle, transition, onUnmounted, unmounted, cleanup, race-condition]
7---
8 
9# Unmount Hooks May Not Fire Inside Transitions During Fast Replacement
10 
11**Impact: MEDIUM** - When a component inside a `<transition>` is replaced by another component during the transition's loading phase, the unmount hooks (`onBeforeUnmount`, `onUnmounted`) may not be called even though the component is removed from the DOM. This can cause memory leaks and resource leaks from unclean side effects.
12 
13This is a known edge case that occurs when the timing is specific - if a parent component with a child inside a transition is replaced while the child is still mounting. The child's mount hooks fire, but unmount hooks never do.
14 
15## Task Checklist
16 
17- [ ] Be aware that unmount hooks are not 100% guaranteed inside transitions
18- [ ] For critical cleanup, consider alternative cleanup strategies
19- [ ] Use `mode="out-in"` on transitions to ensure old component fully unmounts before new mounts
20- [ ] For essential resources, consider cleanup at parent component level
21- [ ] Test component replacement scenarios during development
22 
23**Problematic Scenario:**
24```vue
25<!-- Parent component with lazy-loaded child in transition -->
26<template>
27  <transition>
28    <Suspense>
29      <component :is="currentComponent" />
30    </Suspense>
31  </transition>
32</template>
33```
34 
35```javascript
36// Child component - unmount hooks may not fire if parent changes quickly
37export default {
38  setup() {
39    const socket = new WebSocket('wss://example.com')
40 
41    onMounted(() => {
42      console.log('Mounted - this will run')
43      socket.connect()
44    })
45 
46    onUnmounted(() => {
47      // WARNING: This may NOT run if component is inside transition
48      // and parent navigates away during mounting phase!
49      console.log('Unmounted - might not run')
50      socket.close()
51    })
52  }
53}
54```
55 
56**Safer Patterns:**
57```vue
58<!-- SAFER: Use out-in mode to ensure proper sequencing -->
59<template>
60  <transition mode="out-in">
61    <component :is="currentComponent" :key="currentKey" />
62  </transition>
63</template>
64```
65 
66```javascript
67// SAFER: Cleanup at parent level for critical resources
68// Parent component
69export default {
70  setup() {
71    const childSocket = ref(null)
72 
73    // Parent controls resource lifecycle
74    provide('registerSocket', (socket) => {
75      childSocket.value = socket
76    })
77 
78    onUnmounted(() => {
79      // Parent ensures cleanup even if child unmount hook doesn't fire
80      childSocket.value?.close()
81    })
82  }
83}
84 
85// Child component
86export default {
87  setup() {
88    const registerSocket = inject('registerSocket')
89    const socket = new WebSocket('wss://example.com')
90 
91    // Register with parent for backup cleanup
92    registerSocket(socket)
93 
94    onMounted(() => {
95      socket.connect()
96    })
97 
98    onUnmounted(() => {
99      socket.close() // Still attempt cleanup here
100    })
101  }
102}
103```
104 
105```javascript
106// SAFER: Use AbortController pattern for cancellable operations
107export default {
108  setup() {
109    const abortController = new AbortController()
110 
111    onMounted(() => {
112      fetch('/api/data', { signal: abortController.signal })
113        .then(handleData)
114        .catch(err => {
115          if (err.name !== 'AbortError') {
116            handleError(err)
117          }
118        })
119    })
120 
121    onUnmounted(() => {
122      // If this doesn't fire, request continues but response is ignored
123      // Not a memory leak - just potentially wasted network call
124      abortController.abort()
125    })
126  }
127}
128```
129 
130## Testing for This Issue
131 
132```javascript
133// Test by rapidly switching components during async loading
134async function testUnmountHooks() {
135  // Mount component A (has async setup)
136  await mountComponent('A')
137 
138  // Immediately switch to B before A finishes mounting
139  await mountComponent('B')
140 
141  // Check if A's unmount hooks fired
142  // They may not have!
143}
144```
145 
146## Reference
147- [Vue.js GitHub Issue #6260](https://github.com/vuejs/core/issues/6260)
148- [Vue.js Transition](https://vuejs.org/guide/built-ins/transition.html)
149- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
150