How to use Svelte onMount Lifecycle method
Tags: svelte, sveltekit
Published: 2022-05-07 16:00:37

---
title: How to use Svelte onMount Lifecycle method
published: true
date: 
tags: svelte,sveltekit
canonical_url: https://eternaldev.com/blog/how-to-use-svelte-onmount-lifecycle-method
cover_image: https://www.eternaldev.com/static/2f3dee940c8a7c98185a10b050f759e1/aa1b3/svelteonmountposter.webp
---

## Introduction

As a frontend developer, we need to know when the component is loaded and removed from the browser DOM to execute certain logic. This is very easy to do when you understand the lifecycle events of the framework. Svelte offers a handful of events to do these changes.

## What is onMount Svelte?

onMount provides a way to run a function when the component is loaded to the DOM. This can be used to initialize values, calling API to load some data, perform actions which needs to run only once.

### Template of onMount

```js
<script>
	import {onMount} from "svelte";

	onMount(() => {
		// Write you code here....
		// This is executed when the component is loaded into the DOM
		
		// Optional return function
		return () => {
			// This is executed when the component is removed from the DOM
		}
	})
</script>
```

## Examples for onMount

Let’s look at some of the examples

1. Fetching data from an API
2. Processing data
3. Accessing DOM Elements
4. Adding callback to event

### Fetching data from an API

```js
<script>
	import {onMount} from 'svelte';
	
	let posts = [];
	onMount(async () => {
		let data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
		let postData = await data.json(); 
		posts = [...postData];
	});
</script>

{#each posts as post}
	<h3>{post.title}</h3>
{/each}
```

We are creating a variable called `posts` to hold the data returned from the API. We can then use the `onMount` to call the API. Adding the `async` keyword before the onMount callback allows users to use the `await` syntax. We are using the `fetch` method to call the endpoint which will return the list of posts.

As we are using the `await` keyword, the execution of the next line is done only after the endpoint result is obtained. After that, we can convert the data into `json` format and we are appending to the `posts` variable.

### Processing data

```js
<script>
	import {onMount} from 'svelte';
	
	let names = ['first', 'second', 'third'];
	onMount(() => {
		names = names.map((item) => {
			return item.toUpperCase();
		})
	});
</script>

{#each names as name}
	<h3>{name}</h3>
{/each}
```

We are using simple logic to transform the data in the onMount in this example. we are converting the string to uppercase on the component load.

### Accessing DOM Elements

```js
<script>
	import {onMount} from "svelte";
	
	let emailInput;
	let email = "";
	
	onMount(() => {
		emailInput.focus();
	})
</script>

<input type="email" name="email" bind:value={email} bind:this={emailInput}/>
```

When we are creating a new form page and you want the user to start entering the text directly, you can bind the input element to a variable using `bind:this` syntax. This will give access to the variable to call any methods on that element. We can safely call the method on the `onMount` since we know that the element has been rendered on the screen when the `onMount` is executed.

### Adding callback to event

```js
<script>
	import {onMount} from "svelte";
	let count = 0;
	
	const keydownListener = (event) => {
		if (event.keyCode == 32) {
			count = count + 1;
		}
	}
	
	const resetCount = () => {
		count = 0;
	}
	
	onMount(() => {
		window.addEventListener('keydown', keydownListener) 
		return () => window.removeEventListener('keydown', keydownListener);
	})
</script> 
 
<h2>
	"Space" key has been pressed {count} times
</h2>

<button on:click={resetCount}>Reset</button>
```

We can add a callback to the window event called `keydown` to listen to any keystroke which the user is performing. We can then check if the `keyCode` value is 32, then increment the counter value. `onMount` can return another function which is executed when the component is removed from the DOM. We are removing the event listener to avoid any memory leak after the component is removed from the DOM

## Things to note about onMount

1. onMount function can be called from a external module (ie. External module which has `onMount` function defined will be executed when you are calling that function inside your component.)
2. onMount function does not execute in Server Side Rendering (SSR)

## Conclusion

Lifecycle methods are really helpful and svelte makes it easy to add these to the component.