Ads by ProfitSence
Close

Svelte Component onMount

Last Updated on Wednesday 5th Oct 2022

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