Working with Lifecycle Events in Svelte

Understanding and utilizing lifecycle events in Svelte is crucial for implementing desired functionalities in components. Svelte provides several lifecycle events that we can hook into to execute specific actions at different stages of component rendering and destruction.

The key lifecycle events in Svelte are:

• onMount: Fired after the component is rendered.
• onDestroy: Fired after the component is destroyed.
• beforeUpdate: Fired before the DOM is updated.
• afterUpdate: Fired after the DOM is updated.

To work with these lifecycle events, we need to import them from the svelte package:

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

A common use case for the onMount event is fetching data from external sources. Here’s an example of how to use onMount:

<script>
 import { onMount } from 'svelte'

 onMount(async () => {
   // Perform actions on component mount
 })
</script>

The onDestroy event allows us to clean up data or stop any ongoing operations that were initiated during component initialization, such as timers or periodic functions set using setInterval. It’s important to note that if we return a function from onMount, it serves the same purpose as onDestroy and is executed when the component is destroyed:

<script>
 import { onMount } from 'svelte'

 onMount(async () => {
   // Perform actions on component mount

   return () => {
     // Perform actions on component destroy
   }
 })
</script>

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

<script>
 import { onMount } from 'svelte'

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

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

By utilizing these lifecycle events effectively, we can enhance the functionality and responsiveness of our Svelte components.