The onMount Lifecycle Hook

Snippet

The onMount Lifecycle Hook

The onMount function runs after the component is first rendered to the DOM. It is the best place to fetch data, start timers, or interact with third-party libraries that need a DOM element.

snippet.js
javascript
<script>
  import { onMount } from 'svelte';
 
  onMount(() => {
    console.log('The component has mounted');
    return () => {
      console.log('The component is being destroyed');
    };
  });
</script>

svelte

Breakdown

import { onMount } from 'svelte';

Imports the lifecycle hook from the core Svelte package.

return () => { ... }

An optional return function that runs when the component is unmounted (cleanup).

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

The onMount Lifecycle Hook

Related