Svelte Component onMount

Last Updated On Monday 18th Oct 2021

Svelte onMount

  • In Svelte onMount() is a lifecycle event. That means onMount() fires when runs after the component is first rendered to the DOM.
  • Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance.
  • You Can add an onMount handler that loads some data over the network.

With onMount

	import { onMount } from "svelte";

let renderMe;

onMount(() => {
  setTimeout(() => {
    renderMe = true;
  }, 1000);
});
	
  • You start the setTimeout() when the component is first rendered

Without onMount

	let renderMe;

setTimeout(() => {
  renderMe = true;
}, 1000);
	
  • You start the setTimeout() when JS reaches that line of code.
	onMount(async () => {
   ...
});
	

References