1---
2title: Clean Up Event Listeners and Intervals in onUnmounted
3impact: HIGH
4impactDescription: Failing to clean up side effects causes memory leaks and ghost event handlers
5type: capability
6tags: [vue3, lifecycle, memory-leak, event-listeners, intervals, cleanup]
7---
8 
9# Clean Up Event Listeners and Intervals in onUnmounted
10 
11**Impact: HIGH** - Failing to clean up event listeners, intervals, timeouts, and subscriptions when a component unmounts causes memory leaks and ghost handlers that continue running, leading to performance degradation and subtle bugs in Single Page Applications.
12 
13When using custom events, timers, WebSocket connections, or third-party libraries, always clean up in `onUnmounted` (Composition API) or `unmounted` (Options API).
14 
15## Task Checklist
16 
17- [ ] Track all addEventListener calls and remove them in onUnmounted
18- [ ] Clear all setInterval and setTimeout calls in onUnmounted
19- [ ] Unsubscribe from external event emitters and observables
20- [ ] Disconnect WebSocket connections and third-party library instances
21- [ ] Use `onBeforeUnmount` if cleanup must happen before DOM removal
22 
23**Incorrect:**
24```javascript
25// Composition API - WRONG: No cleanup
26import { onMounted } from 'vue'
27 
28export default {
29  setup() {
30    onMounted(() => {
31      // These keep running after component unmounts!
32      window.addEventListener('resize', handleResize)
33      setInterval(pollServer, 5000)
34      socket.on('message', handleMessage)
35    })
36  }
37}
38```
39 
40```javascript
41// Options API - WRONG: No cleanup
42export default {
43  mounted() {
44    window.addEventListener('scroll', this.handleScroll)
45    this.timer = setInterval(this.refresh, 10000)
46  }
47  // Component unmounts, but listeners and timers persist!
48}
49```
50 
51**Correct:**
52```javascript
53// Composition API - CORRECT: Proper cleanup
54import { onMounted, onUnmounted, ref } from 'vue'
55 
56export default {
57  setup() {
58    const intervalId = ref(null)
59 
60    const handleResize = () => {
61      // handle resize
62    }
63 
64    const handleMessage = (msg) => {
65      // handle message
66    }
67 
68    onMounted(() => {
69      window.addEventListener('resize', handleResize)
70      intervalId.value = setInterval(pollServer, 5000)
71      socket.on('message', handleMessage)
72    })
73 
74    onUnmounted(() => {
75      // Clean up everything!
76      window.removeEventListener('resize', handleResize)
77 
78      if (intervalId.value) {
79        clearInterval(intervalId.value)
80      }
81 
82      socket.off('message', handleMessage)
83    })
84  }
85}
86```
87 
88```javascript
89// Options API - CORRECT: Proper cleanup
90export default {
91  data() {
92    return {
93      timer: null
94    }
95  },
96  mounted() {
97    window.addEventListener('scroll', this.handleScroll)
98    this.timer = setInterval(this.refresh, 10000)
99  },
100  unmounted() {
101    window.removeEventListener('scroll', this.handleScroll)
102    if (this.timer) {
103      clearInterval(this.timer)
104    }
105  },
106  methods: {
107    handleScroll() { /* ... */ },
108    refresh() { /* ... */ }
109  }
110}
111```
112 
113## Using Composable Pattern for Auto-Cleanup
114 
115```javascript
116// Reusable composable with automatic cleanup
117import { onMounted, onUnmounted } from 'vue'
118 
119export function useEventListener(target, event, handler) {
120  onMounted(() => {
121    target.addEventListener(event, handler)
122  })
123 
124  onUnmounted(() => {
125    target.removeEventListener(event, handler)
126  })
127}
128 
129export function useInterval(callback, delay) {
130  let intervalId = null
131 
132  onMounted(() => {
133    intervalId = setInterval(callback, delay)
134  })
135 
136  onUnmounted(() => {
137    if (intervalId) clearInterval(intervalId)
138  })
139}
140 
141// Usage - cleanup is automatic
142import { useEventListener, useInterval } from './composables'
143 
144export default {
145  setup() {
146    useEventListener(window, 'resize', handleResize)
147    useInterval(pollServer, 5000)
148    // No manual cleanup needed!
149  }
150}
151```
152 
153## VueUse Alternative
154 
155```javascript
156// VueUse provides cleanup-aware composables
157import { useEventListener, useIntervalFn } from '@vueuse/core'
158 
159export default {
160  setup() {
161    // Automatically cleaned up on unmount
162    useEventListener(window, 'resize', handleResize)
163 
164    const { pause, resume } = useIntervalFn(pollServer, 5000)
165    // Also provides pause/resume controls
166  }
167}
168```
169 
170## Reference
171- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
172- [VueUse - useEventListener](https://vueuse.org/core/useEventListener/)
173