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.

Practice

1. What is the main purpose of the onDestroy function in a Svelte component?

easy

A. To run cleanup code when the component is removed from the page

B. To initialize component state when it loads

C. To update the component when data changes

D. To handle user input events

Solution

1. Step 1: Understand the lifecycle of a Svelte component

   The onDestroy function runs when the component is about to be removed from the page.

2. Step 2: Identify the purpose of onDestroy

   It is used to clean up things like timers or event listeners to avoid bugs or memory leaks.

3. Final Answer:

   To run cleanup code when the component is removed from the page -> Option A

4. Quick Check:

   onDestroy = cleanup on removal [OK]

Hint: Remember: onDestroy cleans up when component leaves [OK]

Common Mistakes:

• Confusing onDestroy with onMount
• Thinking onDestroy runs on data update
• Using onDestroy to initialize state

2. Which of the following is the correct way to import and use onDestroy in a Svelte component?

easy

A. import { onDestroy } from 'svelte'; onDestroy.cleanup(() => { /* cleanup */ });

B. import onDestroy from 'svelte'; onDestroy(() => { /* cleanup */ });

C. import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ });

D. import { onDestroy } from 'svelte'; onDestroy = () => { /* cleanup */ };

Solution

1. Step 1: Check the import syntax

   The correct import is a named import: import { onDestroy } from 'svelte';

2. Step 2: Check how to use onDestroy

   You call onDestroy with a function to run cleanup code: onDestroy(() => { ... });

3. Final Answer:

   import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); -> Option C

4. Quick Check:

   Correct import and call syntax = import { onDestroy } from 'svelte'; onDestroy(() => { /* cleanup */ }); [OK]

Hint: Use named import and call onDestroy with a function [OK]

Common Mistakes:

• Using default import instead of named import
• Assigning onDestroy instead of calling it
• Calling a non-existent cleanup method

3. Consider this Svelte component code:

import { onDestroy } from 'svelte';

let timer;
onDestroy(() => {
  clearInterval(timer);
});

timer = setInterval(() => {
  console.log('Tick');
}, 1000);

What happens when this component is removed from the page?

medium

A. The interval timer continues running and logs 'Tick' forever

B. The component reloads automatically

C. An error occurs because clearInterval is called incorrectly

D. The interval timer stops and no more 'Tick' logs appear

Solution

1. Step 1: Understand the timer setup

   The code sets a repeating timer with setInterval that logs 'Tick' every second.

2. Step 2: Analyze the onDestroy cleanup

   The onDestroy callback calls clearInterval(timer), which stops the timer when the component is removed.

3. Final Answer:

   The interval timer stops and no more 'Tick' logs appear -> Option D

4. Quick Check:

   onDestroy clears timer = stops logs [OK]

Hint: onDestroy stops timers to prevent leftover logs [OK]

Common Mistakes:

• Thinking timer keeps running after component removal
• Confusing clearInterval with setTimeout
• Assuming onDestroy runs multiple times

4. This Svelte component tries to clean up an event listener on destroy:

import { onDestroy } from 'svelte';

function handleClick() {
  console.log('Clicked');
}

window.addEventListener('click', handleClick);

onDestroy(() => {
  window.removeEventListener('click');
});

What is wrong with this code?

medium

A. removeEventListener is missing the event handler function argument

B. onDestroy should be called before addEventListener

C. handleClick should be defined inside onDestroy

D. window.addEventListener should be inside onDestroy

Solution

1. Step 1: Check removeEventListener usage

   To remove an event listener, you must pass both the event type and the exact handler function.

2. Step 2: Identify the missing argument

   The code calls window.removeEventListener('click'); without the handler handleClick, so the listener is not removed.

3. Final Answer:

   removeEventListener is missing the event handler function argument -> Option A

4. Quick Check:

   removeEventListener needs event and handler [OK]

Hint: Always pass event and handler to removeEventListener [OK]

Common Mistakes:

• Omitting the handler function in removeEventListener
• Adding listeners inside onDestroy instead of removing
• Defining handler inside onDestroy causing scope issues

5. You want to use onDestroy to clean up multiple resources: a timer and a custom event listener. Which is the best way to do this in a Svelte component?

import { onDestroy } from 'svelte';

let timer = setInterval(() => console.log('Tick'), 1000);

function onCustomEvent() { console.log('Event'); }

window.addEventListener('custom', onCustomEvent);

// What is the correct onDestroy usage?

hard

A. onDestroy(() => { clearInterval(timer); window.removeEventListener('custom'); });

B. onDestroy(() => { clearInterval(timer); window.removeEventListener('custom', onCustomEvent); });

C. onDestroy(() => { clearInterval(timer); }); onDestroy(() => { window.removeEventListener('custom'); });

D. onDestroy(() => { clearInterval(); window.removeEventListener('custom', onCustomEvent); });

Solution

1. Step 1: Combine cleanup tasks in one onDestroy callback

   onDestroy accepts a single function where you can clean multiple resources.

2. Step 2: Correctly clear timer and remove event listener

   Use clearInterval(timer) and window.removeEventListener('custom', onCustomEvent) with proper arguments.

3. Final Answer:

   onDestroy(() => { clearInterval(timer); window.removeEventListener('custom', onCustomEvent); }); -> Option B

4. Quick Check:

   Single onDestroy with all cleanup calls [OK]

Hint: Put all cleanup code inside one onDestroy callback [OK]

Common Mistakes:

• Using multiple onDestroy calls instead of one
• Omitting handler in removeEventListener
• Calling clearInterval without timer argument