Unmount Hooks May Not Fire Inside Transitions During Fast Replacement
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.
This 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.
Task Checklist
- Be aware that unmount hooks are not 100% guaranteed inside transitions
- For critical cleanup, consider alternative cleanup strategies
- Use
mode="out-in"on transitions to ensure old component fully unmounts before new mounts - For essential resources, consider cleanup at parent component level
- Test component replacement scenarios during development
Problematic Scenario:
<!-- Parent component with lazy-loaded child in transition -->
<template>
<transition>
<Suspense>
<component :is="currentComponent" />
</Suspense>
</transition>
</template>// Child component - unmount hooks may not fire if parent changes quickly
export default {
setup() {
const socket = new WebSocket('wss://example.com')
onMounted(() => {
console.log('Mounted - this will run')
socket.connect()
})
onUnmounted(() => {
// WARNING: This may NOT run if component is inside transition
// and parent navigates away during mounting phase!
console.log('Unmounted - might not run')
socket.close()
})
}
}Safer Patterns:
<!-- SAFER: Use out-in mode to ensure proper sequencing -->
<template>
<transition mode="out-in">
<component :is="currentComponent" :key="currentKey" />
</transition>
</template>// SAFER: Cleanup at parent level for critical resources
// Parent component
export default {
setup() {
const childSocket = ref(null)
// Parent controls resource lifecycle
provide('registerSocket', (socket) => {
childSocket.value = socket
})
onUnmounted(() => {
// Parent ensures cleanup even if child unmount hook doesn't fire
childSocket.value?.close()
})
}
}
// Child component
export default {
setup() {
const registerSocket = inject('registerSocket')
const socket = new WebSocket('wss://example.com')
// Register with parent for backup cleanup
registerSocket(socket)
onMounted(() => {
socket.connect()
})
onUnmounted(() => {
socket.close() // Still attempt cleanup here
})
}
}// SAFER: Use AbortController pattern for cancellable operations
export default {
setup() {
const abortController = new AbortController()
onMounted(() => {
fetch('/api/data', { signal: abortController.signal })
.then(handleData)
.catch(err => {
if (err.name !== 'AbortError') {
handleError(err)
}
})
})
onUnmounted(() => {
// If this doesn't fire, request continues but response is ignored
// Not a memory leak - just potentially wasted network call
abortController.abort()
})
}
}Testing for This Issue
// Test by rapidly switching components during async loading
async function testUnmountHooks() {
// Mount component A (has async setup)
await mountComponent('A')
// Immediately switch to B before A finishes mounting
await mountComponent('B')
// Check if A's unmount hooks fired
// They may not have!
}