Back to Snippets
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-party instances out of the reactive system. Vue uses shallowRef and markRaw; React uses useRef for large objects/instances and triggers re-renders intentionally. Use cases: Large tables, cached datasets, chart/map/editor SDK instances.

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

Related Snippets

Performance
Complex

Performance Optimization with Memoization

Implement memoization for expensive computations to optimize component performance in enterprise applications. ...

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  
  // Typed data type
  interface Product {
    id: number;
    name: string;
    price: number;
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

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;
  }