Back to Snippets
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 snippet uses requestIdleCallback when available and falls back to setTimeout in browsers that do not support it. It also demonstrates safe cancellation on unmount to prevent updating state after the component is gone. Use cases: Precomputing indexes, warming caches, parsing large JSON, low-priority analytics.

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
82
83
84
85
86
87
88
89
90

Related 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 memor...

<script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const countdown = ref<number>(60);
  let timer: NodeJS.Timeout | null = null;
  let abortController: AbortController | null = null;
  
  // Simulate API call with abort capability
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

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;