Lifecycle in Svelte

[Hey folks ,welcome back to another tutorial in the series of svelte.Till now we have covered intro , setup , logics , binding and much more .

Today we are going to discuss Lifecycle and its related methods in svelte.

These are lifecycle methods generally used in svelte

onMount.
onDestroy
beforeUpdate
afterUpdate
tick function

Lifecycle : Popularly known as component's lifecycle. It is defined as a complete cycle starting from entering into the DOM till exit from the DOM.

onMount() : When a component renders and adds into DOM tree , onMount function is called of its own .If we want something to occur while mounting of the component .It can be executed inside the onMount function. In general , fetching of data ,storing into stores ,such typee of working is done in onMount.

To use it , we have to import it from 'svelte' example

<script>
    let names = [];
        onMount(async () => {
     console.log("mounted into DOM")

    });
</script>

<h1>Name album</h1>

<div class="name">
My name is Khan.
 </div>

<style>
    .names {
        width: 100%;
        padding:20px;
    }

</style>

As soon as the above given component is mounted ,it will print "mounted into DOM" in the console. We can do what ever we want inside onMount function.

If the onMount callback returns a function, that function will be called when the component is destroyed.

onDestroy : used to run a piece of code the component is unmounted/destroyed i.e removed from the DOM. It is also fetched from'svelte'

import { onDestroy } from 'svelte';

<script>
    import { onDestroy } from 'svelte';

    let counter = 0;
    const interval = setInterval(() => counter += 1, 1000);

    onDestroy(() => clearInterval(interval));
</script>

SImple example to end the interval as soon as component cam out of the DOM

and we can call our onDestroy function any time in component also we can export it to use somewhere outside of component.

beforeUpdate and afterUpdate : beforeUpdate is used to run code immediately before updating of the DOM. Similarly,afterUpdate is used to run the code just after DOM updated.

tick :. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM .Many time we need updated value always as soon ans any update is done.

So generally what happens is ,it is not reflected into the DOM immediately.We use tick function to hold the promise until all the state and reactive states changs.

tick function returns a promise and run resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).

let say we have to increase a state by one on clicking of a button.
<script>
 let first =1;
$:double =count*2 ;

function increase()
{first++;
console.log(double);
}
<button on:click={increase}>click to double {first}< *2 = {double} /button>

In above example we can run increase function .Double value is not printed instantly.it takes the same value as before no update value of reactive stat element . To have the latest updated value tick function plays

<script>
 let first =1;
$:double =count*2 ;

function increase()
{
first++;
console.log(double); //i.e 1 
tick().then(()=>
console.log("after tick",doubled) // now this will give updated value.
}
</script>

Tick will not run until or unless all the pending states and reactive state to be resolved i.e if some state is looking to be updated then tick will hold for that update. Tick function holds uptill all state got changed and after that it runs the statement contained in then. It runs when all the state and variables are properly updated. as in above example ,we find out new value inside tick function.

That's all from my side in this tutorial Stay connected and if you have any questions or suggestions ,please let me and writ into comment section.

Lifecycle in Svelte

series on svelte part 8