The onMount Lifecycle Hook

Snippet

The onMount Lifecycle Hook

The onMount function schedules a callback to run as soon as the component has been rendered to the DOM. It is the preferred place to fetch data or interact with third-party libraries that need a DOM element.

snippet.js
javascript
import { onMount } from 'svelte';
 
let photos = [];
 
onMount(async () => {
  const res = await fetch('https://api.example.com/photos');
  photos = await res.json();
});

svelte

Breakdown

import { onMount } from 'svelte';

Imports the lifecycle hook from the Svelte core package.

onMount(async () => { ... });

Defines the code to run after the component is first mounted.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

The onMount Lifecycle Hook

Related