Back to Snippets
Performance
Complex

Performance Optimization with Memoization

Implement memoization for expensive computations to optimize component performance in enterprise applications. Vue uses computed properties (auto-memoized); React uses useMemo/useCallback (manual memoization). Key features: - Memoization of expensive array filtering/sorting (10,000+ items) - Prevent unnecessary re-renders - Type-safe memoized values/callbacks - Dependency array management (React) Use cases: Large data sets, complex calculations, frequent re-renders.

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

Related Snippets

Performance
Complex

Offload CPU Work to a Web Worker (Progress + Cancel)

Keep the UI responsive by moving CPU-heavy work off the main thread using a Web Worker. This snippet creates an inli...

<script setup lang="ts">
  import { computed, onUnmounted, ref } from 'vue';
  
  type WorkerInMessage =
    | { type: 'start'; n: number; chunkSize: number }
    | { type: 'cancel' };
  
  type WorkerOutMessage =
Performance
Complex

Reduce Tracking Overhead for Large Data (Vue shallowRef/markRaw + React useRef)

Improve runtime performance by avoiding unnecessary deep tracking of large immutable datasets and by keeping third-p...

<script setup lang="ts">
  import { computed, markRaw, shallowRef } from 'vue';
  
  interface Row {
    id: number;
    name: string;
    amount: number;
  }
Performance
Complex

Subtree Memoization to Reduce Re-Renders (Vue v-memo + React.memo)

Skip updating expensive UI subtrees when their inputs haven't changed. Vue's v-memo lets you memoize a subtree based...

<script setup lang="ts">
  import { ref } from 'vue';
  
  interface Item {
    id: number;
    label: string;
  }