Lifecycle Events In Svelte 
Tags: javascript, webdev, svelte, beginners
Published: 2019-10-18 14:14:35


#Getting to know Lifecycle Events in Svelte

Every component in svelte has a lifecycle that starts when it is created, and ends when it is destroyed.

N.B
> Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a setTimeout.

Lifecycle functions in svelte include

* **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

and the special **tick** function

#onMount

The most frequently used is **onMount**, which runs after the component is first rendered to the DOM.
A common use for **onMount** is to fetch data from other sources.

Here’s a sample usage of **onMount**:
```html
<script>
 import { onMount } from "svelte";

let myTodo;
  onMount(async()=>{
     const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
      const todo = await response.json();
      myTodo = todo
  });
</script>

<div>
  {#if myTodo}
    <ul>
      <li>{myTodo.title}</li>
    </ul>
  {:else}
    <p>loading.....</p>
  {/if}
</div>

```

#onDestroy

**onDestroy** allows us to cleanup data or stop any operation we might have started at the component initialization, like timers or event listeners which prevents us from memory leaks.

Here’s a sample usage of **onDestroy**:
```html

<script>
  import { onDestroy } from "svelte";
  let date = new Date();

  let timer = setInterval(() => {
    date = new Date();
  }, 1000);
 // clears the timer when a component is destroyed
  onDestroy(function() {
    clearInterval(timer);
  });

</script>

<p>{date.toLocaleTimeString()}</p>

```

#beforeUpdate and afterUpdate

The beforeUpdate function schedules work to happen immediately before the DOM has been updated. afterUpdate is its counterpart, used for running code once the DOM is in sync with your data.

##beforeUpdate
The **beforeUpdate** does exactly what it implies,in technical terms you can say it schedules a callback function to runs immediately before the component is updated after any state change.

Here’s an example:
```html 
<script>
  import { beforeUpdate} from "svelte";
  let count = 1;

  beforeUpdate(function() {
    console("You can see me before count value is updated");
  });
</script>

<div>
  <h1>{count}</h1>
  <button on:click={() => count++}>Increment</button>
</div>

```
##afterUpdate
**afterUpdate** is **beforeUpdate's** counterpart, used for running code once the DOM is in sync with your data.

Here’s an example:
```html
<script>
  import { afterUpdate} from "svelte";
  let count = 1;

  afterUpdate(function() {
    console("You can see me after count value is updated");
  });
</script>

<div>
  <h1>{count}</h1>
  <button on:click={() => count++}>Increment</button>
</div>

```

#Tick
At the start of this post i mentioned that the **tick** lifecycle function was special,why is it special?well...

>The tick function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises.
It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).

Here’s an example:

```html
<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('the component is about to update');
		await tick();
		console.log('the component just updated');
	});
</script>
```
A better usecase example of this function can be found on the svelte
website.[Tick Example](https://svelte.dev/examples#tick)


---
Thanks for reading and stay tuned!