onDestroy in Svelte - Performance & Optimization

Performance: onDestroy

MEDIUM IMPACT

This affects cleanup timing and memory usage after a component is removed, impacting interaction responsiveness and memory leaks.

Cleaning up event listeners when a Svelte component is removed

Svelte

import { onDestroy } from 'svelte';

const onResize = () => {
  console.log('resize');
};
window.addEventListener('resize', onResize);

onDestroy(() => {
  window.removeEventListener('resize', onResize);
});

Removes event listener when component unmounts, freeing memory and reducing CPU work.

📈 Performance GainPrevents memory leaks and reduces unnecessary event processing, improving INP.

Cleaning up event listeners when a Svelte component is removed

Svelte

import { onDestroy } from 'svelte';

// No cleanup of event listener
window.addEventListener('resize', () => {
  console.log('resize');
});

Event listener stays active after component unmounts, causing memory leaks and unnecessary CPU usage.

📉 Performance CostIncreases memory usage over time; can cause slow interaction (INP) due to unnecessary event handling.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No cleanup in onDestroy	No change	0	0	[X] Bad
Proper cleanup with onDestroy	No change	0	0	[OK] Good

Rendering Pipeline

onDestroy runs cleanup code after the component is removed from the DOM, preventing leftover listeners or timers that could cause extra work during interaction.

→Interaction Handling

→Memory Management

⚠️ BottleneckMemory leaks from leftover event listeners or timers

Core Web Vital Affected

INP

This affects cleanup timing and memory usage after a component is removed, impacting interaction responsiveness and memory leaks.

Optimization Tips

1Always remove event listeners and timers in onDestroy to prevent memory leaks.

2Use onDestroy to free resources immediately after component unmount.

3Proper cleanup improves interaction responsiveness and avoids slowdowns.

Performance Quiz - 3 Questions

What is the main performance benefit of using onDestroy in a Svelte component?

A It cleans up resources to prevent memory leaks and improve interaction responsiveness.

B It speeds up the initial page load by delaying component creation.

C It reduces the number of DOM nodes created during rendering.

D It automatically caches component data for faster re-renders.

DevTools: Performance

How to check: Record a session while mounting and unmounting the component. Look for increasing memory usage or long tasks after unmount.

What to look for: Memory graph should not steadily increase after unmount; no long tasks related to leftover event handlers.