Blog post image

What is onMount() and onDestroy() in Svelte?

Every component in Svelte has its own lifecycle, and with functions such as onMount and onDestroy, you can run code during certain periods of these lifecycles. In this article, we will talk about what a component lifecycle is, introduce you to the onMount and onDestroy functions and learn when to use them.

What is a component lifecycle?

As mentioned in the introduction, every component in Svelte has its own lifecycle. A lifecycle starts when the component is rendered to the DOM (Document Object Model) and it ends when it is being removed again.

During the lifecycle of a component, you will see the following events, and each one of these has its own purpose:

The Svelte onMount function is most commonly used for functions such as API fetch calls, onDestroy is usually used for removing listeners, and functions such as intervals. The beforeUpdate() function is running right before an update and, afterUpdate() is running immediately after an update.

Introduction to the onMount() function

The onMount() function is probably the most common function to use since it is running as soon as the component has been rendered to the DOM. You can use onMount for many things, but one of the most common is API fetch calls (When you need to ask the server for data to display on the client-side).

Here are some common ways to use the svelte onMount() function:

  • API Fetch calls - When you need to display dynamic content which you have stored in your database. Placing the fetch calls in your onMount function is better than putting them at the top of the script tag since fetch calls won't be running during SSR (Server-side rendering).
  • Processing of data - Now and then, you have data that needs to be processed in the front-end before you can display it on your website. For these types of functions, the onMount() is fantastic. An example of the processing could be recreating an array of users to fit a chart.

Here is an example of how you can use the Svelte onMount() function in your project. In this example, we are fetching a placeholder image to use in our project:

<script lang="ts">
   import { onMount } from "svelte";
   let placeholderImg;

   onMount(async()=>{
     const response = await fetch("https://via.placeholder.com/300.png");
     placeholderImg = response;
   });
</script>

Introduction to the onDestroy() function

The Svelte onDestroy() function is the second most used function since it is running when a component is being removed from the DOM. Running functions when a component is being removed/destroyed allows you to run clean-up functions to either remove listeners or stop intervals. Cleaning up functions and stopping timers prevents memory leaks and is therefore preferable.

Here is an example of how you can use the onDestroy() function in a project. In the example, we have created a counter, and when destroying/removing the component we are stopping the counter to prevent memory leaks:

<script lang="ts">
   import { onDestroy } from "svelte";
   let count: number = 0;

   let timer = setInterval(() => {
     count = count++;
   }, 1000);

   onDestroy(function() {
     clearInterval(count);
   });
</script>

Wrapping up

Now we have talked a bit about what a component lifecycle is in Svelte, and which functions you can use depending on the time during the lifecycle. We have also briefly gone through some examples of functions to use during these cycles and what to expect from them.

By now we hope you have gotten a general understanding of how to use the Svelte onMount() and onDestroy() function in your project. If you still have questions you would like answered or find something you think should be added to the article, please don't hesitate to contact us via our contact form. You can find the contact form on our contact page.

Thank you for reading this article and please share it with your fellow web developers.

Author

Michael Andersen

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.