Skip to content

Svelte Lifecycle Events

How to work with Lifecycle Events in Svelte

Every component in Svelte fires several lifecycle events that we can hook into that help us implement the functionality we have in mind.

In particular, we have

We can schedule functions to happen when these events are fired by Svelte.

We don’t have access to any of those methods by default, but we can import them from the svelte package:

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>

A common scenario for onMount is to fetch data from other sources.

Here’s a sample usage of onMount:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount
  })
</script>

onDestroy allows us to clean up data or stop any operation we might have started at the component initialization, like timers or scheduled periodic functions using setInterval.

One particular thing to notice is that if we return a function from onMount, that serves the same functionality of onDestroy - it’s run when the component is destroyed:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount

    return () => {
      //do something on destroy
    }
  })
</script>

Here’s a practical example that sets a periodic function to run on mount, and removes it on destroy:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    const interval = setInterval(() => {
      console.log('hey, just checking!')
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  })
</script>

→ Here's my latest YouTube video

→ Get my Svelte Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list