Reactive Map and Set in Vue - Performance & Optimization

Performance: Reactive Map and Set

MEDIUM IMPACT

This affects how Vue tracks changes in Map and Set collections, impacting update speed and rendering responsiveness.

Updating a reactive Map frequently in Vue

Vue

const myMap = ref(new Map());
// Batch updates by replacing the Map
const tempMap = new Map();
for (let i = 0; i < 100; i++) {
  tempMap.set(i, i * 2);
}
myMap.value = tempMap;

Replacing the Map reduces the number of reactive mutation triggers to just one.

📈 Performance GainSingle reactive trigger and re-render instead of 100 mutation triggers, improving interaction responsiveness.

Updating a reactive Map frequently in Vue

Vue

const myMap = reactive(new Map());
// Updating inside a loop
for (let i = 0; i < 100; i++) {
  myMap.set(i, i * 2);
}

Each set() call triggers Vue's reactivity system causing reactivity overhead from multiple triggers (re-renders batched).

📉 Performance CostTriggers 100 reactive triggers (batched re-render), causing overhead and potential UI lag.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple individual Map.set() calls	Many reactive triggers	1 reflow (batched)	Medium paint cost	[X] Bad
Batch Map replacement	Single reactive trigger	Single reflow	Low paint cost with one update	[OK] Good
Multiple individual Set.add() calls	Many reactive triggers	1 reflow (batched)	Medium paint cost	[X] Bad
Batch Set replacement	Single reactive trigger	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When reactive Map or Set changes, Vue's reactivity system triggers updates that flow through style recalculation, layout, paint, and composite stages depending on what DOM changes occur.

→Reactive Dependency Tracking

→Component Update

→Layout

→Paint

→Composite

⚠️ BottleneckComponent Update stage overhead due to multiple reactive triggers causing repeated dependency collection.

Core Web Vital Affected

INP

This affects how Vue tracks changes in Map and Set collections, impacting update speed and rendering responsiveness.

Optimization Tips

1Replace reactive Map or Set instances after batch mutations to minimize triggers.

2Avoid many individual mutations on reactive Map or Set inside loops.

3Use temporary non-reactive collections then assign to ref.value for bulk operations.

Performance Quiz - 3 Questions

What is the main performance issue when updating a reactive Map many times in a loop without batching?

A Vue does not support reactive Map

B The Map data structure is slow inherently

C Each update triggers Vue's reactivity system causing overhead

D The browser blocks rendering for each Map update

DevTools: Performance

How to check: Record a performance profile while performing Map or Set updates in your Vue app. Look for multiple component re-renders and layout recalculations.

What to look for: Long scripting tasks and repeated rendering indicate many reactive triggers; a single short update shows good batching.

Practice

1. Which Vue function should you use to make a Map reactive so that UI updates when it changes?

easy

A. computed()

B. ref()

C. watch()

D. reactive()

Solution

1. Step 1: Understand Vue reactivity basics

   Vue's reactive() wraps objects like Map or Set to track changes.

2. Step 2: Identify correct function for Map reactivity

   Only reactive() can wrap Map to make it reactive, so UI updates on mutations.

3. Final Answer:

   reactive() -> Option D

4. Quick Check:

   Wrap Map with reactive() = C [OK]

Hint: Use reactive() to wrap Map or Set for reactivity [OK]

Common Mistakes:

• Using ref() which works for primitives, not Map/Set
• Confusing computed() with reactive()
• Trying watch() to make Map reactive

2. Which of the following is the correct syntax to create a reactive Set in Vue?

easy

A. const mySet = reactive(new Set())

B. const mySet = ref(new Set())

C. const mySet = reactive(Set())

D. const mySet = reactive([])

Solution

1. Step 1: Check how to create reactive Set

   You must create a new Set instance and wrap it with reactive().

2. Step 2: Identify correct syntax

   reactive(new Set()) is correct; Set() without new is invalid, and ref() wraps primitives.

3. Final Answer:

   const mySet = reactive(new Set()) -> Option A

4. Quick Check:

   Use new Set() inside reactive() = B [OK]

Hint: Always use new Set() inside reactive() for reactive Sets [OK]

Common Mistakes:

• Omitting new keyword for Set
• Using ref() instead of reactive() for Set
• Wrapping an array instead of Set

3. Given this Vue setup:

const myMap = reactive(new Map());
myMap.set('a', 1);
myMap.set('b', 2);
myMap.delete('a');
console.log([...myMap.keys()]);

What will be logged to the console?

medium

A. ['b']

B. ['a', 'b']

C. []

D. ['a']

Solution

1. Step 1: Track Map mutations

   Initially, keys 'a' and 'b' are added. Then 'a' is deleted.

2. Step 2: Determine final keys

   After deletion, only 'b' remains as a key in the Map.

3. Final Answer:

   ['b'] -> Option A

4. Quick Check:

   Deleted 'a', keys left = ['b'] [OK]

Hint: Deleting a key removes it from Map keys list [OK]

Common Mistakes:

• Forgetting the delete call removes 'a'
• Assuming keys remain unchanged after mutation
• Confusing keys() with values()

4. What is wrong with this Vue code that tries to make a reactive Map?

const myMap = reactive(Map());
myMap.set('key', 'value');

medium

A. reactive() cannot wrap Map

B. Map() must be called with new keyword

C. set() method does not exist on Map

D. Missing ref() wrapper

Solution

1. Step 1: Check Map instantiation syntax

   Map must be created with new Map(), not just Map().

2. Step 2: Identify error cause

   Calling Map() without new causes a TypeError or unexpected behavior.

3. Final Answer:

   Map() must be called with new keyword -> Option B

4. Quick Check:

   Use new Map() to create Map instance [OK]

Hint: Always use new Map() to create Map instances [OK]

Common Mistakes:

• Omitting new keyword for Map
• Thinking reactive() can't wrap Map
• Using ref() instead of reactive()

5. You have a reactive Set in Vue:

const mySet = reactive(new Set(['apple', 'banana']));

// Later in code
mySet.add('banana');
mySet.delete('apple');

const items = [...mySet];

What will be the value of items after these operations?

hard

A. ['apple', 'banana', 'banana']

B. ['banana', 'apple']

C. ['banana']

D. ['apple']

Solution

1. Step 1: Understand Set behavior with duplicates

   Sets only store unique values, so adding 'banana' again does nothing.

2. Step 2: Track mutations

   Initially contains 'apple' and 'banana'. After deleting 'apple', only 'banana' remains.

3. Final Answer:

   ['banana'] -> Option C

4. Quick Check:

   Set keeps unique items, deleted 'apple' = ['banana'] [OK]

Hint: Sets ignore duplicate adds and remove items on delete [OK]

Common Mistakes:

• Assuming duplicates appear in Set
• Forgetting delete removes item
• Confusing Set with Array behavior