onDestroy in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the onDestroy lifecycle function in Svelte?

The onDestroy function runs cleanup code when a component is removed from the page, like stopping timers or removing event listeners.

beginner

How do you import <code>onDestroy</code> in a Svelte component?

You import it from 'svelte' like this: <code>import { onDestroy } from 'svelte';</code>

intermediate

Show a simple example of using onDestroy to clear an interval timer.

<pre>import { onDestroy } from 'svelte';

const timer = setInterval(() =&gt; {
  console.log('Tick');
}, 1000);

onDestroy(() =&gt; {
  clearInterval(timer);
});</pre>

beginner

When exactly does the onDestroy callback run in the component lifecycle?

It runs right before the component is removed from the DOM, allowing you to clean up resources.

intermediate

Can you register multiple onDestroy callbacks in one component?

Yes, you can call onDestroy multiple times to register several cleanup functions. All will run when the component is destroyed.

What is the main use of onDestroy in Svelte?

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

B To initialize component state

C To handle user input events

D To style the component

onDestroy is used to run cleanup code when the component is removed from the DOM.

How do you use onDestroy in a Svelte component?

A Call <code>onDestroy()</code> with a callback function

B Write a function named <code>onDestroy</code> inside the component

C Add <code>onDestroy</code> attribute to HTML elements

D Use <code>onDestroy</code> as a CSS class

You import onDestroy and call it with a function to run on component removal.

Which of these is a good use case for onDestroy?

A Starting a timer when component loads

B Clearing a timer when component unloads

C Rendering HTML content

D Fetching data from an API

onDestroy is perfect for cleaning up things like timers.

Can you register more than one onDestroy callback in a component?

A Only if you use a special syntax

B No, only one callback is allowed

C Yes, multiple callbacks can be registered

D Only if the component is a class

Svelte allows multiple onDestroy callbacks; all run on destruction.

When does the onDestroy callback run?

A After the component is added to the DOM

B When the component updates

C When the component receives props

D Before the component is removed from the DOM

onDestroy runs just before the component is removed from the page.

Explain how and why you would use onDestroy in a Svelte component.

Think about what needs to be cleaned up when a component disappears.

Describe a scenario where forgetting to use onDestroy could cause problems in a Svelte app.

Imagine a timer keeps running even after you leave a page.