Action update and destroy in Svelte - Performance & Optimization

Performance: Action update and destroy

MEDIUM IMPACT

This concept affects how efficiently DOM elements are updated and cleaned up, impacting interaction responsiveness and memory usage.

Managing DOM element behavior with Svelte actions that update and clean up

Svelte

function myAction(node, params) {
  function handleClick() {
    console.log('clicked with', params);
  }
  node.addEventListener('click', handleClick);
  return {
    update(newParams) {
      params = newParams;
    },
    destroy() {
      node.removeEventListener('click', handleClick);
    }
  };
}

Reuses the same event listener and cleans it up on destroy, preventing buildup and memory leaks.

📈 Performance GainSingle event listener per element, no memory leaks, better input responsiveness.

Managing DOM element behavior with Svelte actions that update and clean up

Svelte

function myAction(node) {
  node.addEventListener('click', () => console.log('clicked'));
  return {
    update(newParams) {
      // no cleanup of old listeners
      node.addEventListener('click', () => console.log('clicked with', newParams));
    },
    // no destroy method
  };
}

Adding event listeners on every update without removing old ones causes multiple handlers and memory leaks.

📉 Performance CostTriggers multiple event listeners per update, increasing memory use and slowing interaction responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Adding new listeners on every update	Multiple event listeners added	No direct reflows but slows event handling	Minimal paint cost	[X] Bad
Single listener with update and destroy cleanup	One event listener reused	No reflows triggered	Minimal paint cost	[OK] Good

Rendering Pipeline

Svelte actions run during DOM element creation and updates. The update method modifies behavior without re-creating listeners, and destroy cleans up to avoid leaks.

→DOM Operations

→Layout

→Composite

⚠️ BottleneckExcessive event listeners cause slower event handling and increased memory pressure.

Core Web Vital Affected

INP

This concept affects how efficiently DOM elements are updated and cleaned up, impacting interaction responsiveness and memory usage.

Optimization Tips

1Always remove event listeners in the destroy method to prevent memory leaks.

2Avoid adding new event listeners inside update without cleanup.

3Reuse event listeners and update parameters instead of recreating handlers.

Performance Quiz - 3 Questions

What is the main performance risk of adding event listeners inside the update method without removing old ones?

A Faster rendering because more listeners improve responsiveness

B No impact because event listeners do not affect performance

C Memory leaks and slower input responsiveness due to multiple listeners

D Improved layout stability

DevTools: Performance

How to check: Record a performance profile while interacting with the element. Look for multiple event listeners or memory growth over time.

What to look for: Check the Event Listeners tab in Elements panel for duplicates and the Memory panel for leaks.