Initializing Logic with the onMount Hook

Snippet

Initializing Logic with the onMount Hook

The onMount lifecycle hook runs after the component is first rendered to the DOM. It is the recommended place for side effects like API calls, setting up intervals, or interacting with third-party libraries that require DOM access.

snippet.js
javascript
<script>
  import { onMount } from 'svelte';
  let photos = [];
 
  onMount(async () => {
    const res = await fetch('https://api.example.com/photos');
    photos = await res.json();
  });
</script>
 
<ul>
  {#each photos as photo}
    <li>{photo.title}</li>
  {/each}</ul>

svelte

Breakdown

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

Defines a callback to run once the component is mounted.

photos = await res.json();

Updating the top-level variable triggers an automatic UI re-render.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Initializing Logic with the onMount Hook

Related