Back to Snippets
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 on dependencies; React uses React.memo with stable props. Use cases: Large lists, expensive child components, dashboards with frequently updating state.

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

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

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