Back to Snippets
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 invalid state updates. The snippet also respects the user's reduced-motion preference. Use cases: Animated progress indicators, canvas rendering loops, lightweight micro-interactions.

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

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

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');