# Svelte Lifecycle Events

> Learn how to work with lifecycle events in Svelte, hooking into onMount, onDestroy, beforeUpdate, and afterUpdate to run code at the right moment.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-10-18 | Topics: [Svelte](https://flaviocopes.com/tags/svelte/) | Canonical: https://flaviocopes.com/svelte-lifecycle-events/

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 rendered
- `onDestroy` fired after the component is destroyed
- `beforeUpdate` fired before the DOM is updated
- `afterUpdate` 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:

```html
<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`:

```html
<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:

```html
<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:

```html
<script>
  import { onMount } from 'svelte'

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

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