What is OnMount() in Svelte?

Svelte is a JavaScript framework used to develop web applications. It is unique because it runs the application on compile, and compiles the code in Vanilla JavaScript.

Component render

Componentsform a single webpage are a concept that come from a popular framework named React. Suppose a single web page is divided into three components:

  1. Search bar
  2. Submit button
  3. Queries section

OnMount is a function that is called when a component is initialized. In other words, we can say that when a component renders, the first function it calls is onMount. This is similar to the concept of calling useEffect in React with an empty array as a parameter.

Syntax

The following piece of code explains the syntax of onMount function.

<script>
	import { onMount } from 'svelte';
	let array = [];
	onMount(async () => {
		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
		array = await res.json();
	});
</script>

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)