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
onMount
fired after the component is renderedonDestroy
fired after the component is destroyedbeforeUpdate
fired before the DOM is updatedafterUpdate
fired after the DOM is updated
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>
→ 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