Back to Snippets
Lifecycle / Hooks
Complex

Lifecycle & Side Effect Management with Cleanup

Implement safe side effect management (timers, API calls, event listeners) with proper cleanup to prevent memory leaks in enterprise applications. Vue uses onMounted/onUnmounted for lifecycle hooks; React uses useEffect with a cleanup function. Key features: - Timer initialization on mount - API call with abort controller (cancel pending requests on unmount) - Event listener cleanup - Memory leak prevention (critical for long-running applications) Use cases: Real-time data fetching, countdown timers, global event handling.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

Related Snippets

Lifecycle / Hooks
Complex

Document Title Sync with State + Restore on Unmount

Keep the browser tab title in sync with component state (e.g., unread count) and safely restore the previous title w...

<script setup lang="ts">
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
  
  // Example state that influences the tab title
  const unreadCount = ref<number>(3);
  const baseTitle = 'Inbox';
  
  // Store the title that existed before this component mounted
Lifecycle / Hooks
Complex

Defer Heavy Work with requestIdleCallback (Cancelable)

Defer non-urgent and potentially expensive work until the browser is idle, while keeping the UI responsive. This sni...

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  // Minimal typing to keep the snippet self-contained across TS configs
  type IdleDeadlineLike = { didTimeout: boolean; timeRemaining: () => number };
  type IdleHandle = number;
  
  const status = ref<'idle' | 'scheduled' | 'running' | 'done' | 'canceled'>('idle');
Lifecycle / Hooks
Complex

Smooth UI Animation Loop with requestAnimationFrame (Reduced Motion Aware)

Implement a smooth animation loop using requestAnimationFrame and cancel it during unmount to avoid leaks and invali...

<script setup lang="ts">
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  
  const isRunning = ref<boolean>(true);
  const progress = ref<number>(0); // 0..100
  
  let rafId: number | null = null;
  let startTs: number | null = null;