Svelte Svelte

onMount & onDestroy Lifecycle

Check out a free preview of the full Svelte course:
The "onMount & onDestroy Lifecycle" Lesson is part of the full, Svelte course featured in this preview video. Here's what you'd learn in this lesson:

Rich live codes component lifecycle events that starts when it is created with onMount, and ends when it is destroyed with onDestroy. A lifecycle is a description of the different stages a component goes through.

Get Unlimited Access Now

Transcript from the "onMount & onDestroy Lifecycle" Lesson

[00:00:00]
>> So back when we were looking at the canvas tutorial, we saw the unmount lifecycle function and we're gonna cover life cycle in a bit more detail now. What life cycle is a description of the different stages that a component goes through. It's created we call that mounting and then it goes through a number of updates and then eventually the component will be destroyed.

[00:00:24] The life cycle function that you'll use most often is the unmount life cycle function which runs as soon as the component has been rendered to the DOM. And so in this example, what we wanna do is add on Mon callback that is gonna load some data from over the network.

[00:00:46] So we import it directly from spelt Then inside, the callback, we're gonna make a request to the JSON placeholder API. And then we're gonna assign the return value of that API call to our photos variable up here. So as soon as that comes in It's gonna loop over the result of that call and render some placeholder photos.

[00:01:34] Now you could put this block here, inside, the script tag like so. Except we can't use a weight, so we need to do it like this. So the reason that it makes sense to do this work inside the unmount callback instead of at the top level of your script element is that when you're rendering this component in a server side context.

[00:02:08] You don't wanna be sending off ,fetch requests that are gonna come back once the component has already been rendered. That fetch request only matters in the client side context. And the unmount callback only runs in the client side context. So any code that you put in here Won't run when you use server side rendering with yourself components.

[00:02:39] We also have an onDestroy callback which is sort of the opposite of onMount. So in this example here, we want to have an interval function, that is going to take up this value once a second and then we're gonna destroy that interval once the component is destroyed. I forgot to add the second argument.

[00:03:17] There we go. That's better. And then once the component is destroyed. We'll need to clear that interval to avoid generating a memory leak in our application. Now Ondestroy is different to onMount in that it will run inside the server side rendering context. So if there's any work that happens at the top level of the script block and you need to clean up that work, then onDestroy is a good place to put it.

[00:03:50] If you do did the work inside onMount then you can clean up inside the onMount by returning the onDestroy handler from the onMount handler. But for situations where you're not using onMount, ondestroy is your friend. Now this is just a regular function, which means that we can call it from anywhere and this means that we can create our own custom lifecycle functions.

[00:04:16] So we can abstract this logic out into an external helper. For example, in our utils js file here, we could take that implementation Put it inside there and instead of Mutating the components private state which we no longer have access to, we can just call the provided callback may that parametizable, like so.

[00:04:54] And now we're gonna import on interval from But utils file And use our custom life cycle function like so. And so that's something that you could use in multiple components without having to duplicate the logic each time. So in between onMount and onDestroy, we have the update cycle.

[00:05:33] We have before update and after update, which happened, as the name suggests before the DOM gets updated with any new state. And then once the DOM is current with the state, that was passed in. You won't need to use these very often, but occasionally you do and they're very useful for things that are pretty difficult to achieve in a purely declarative state driven world.

[00:05:57] Like for example, a date in the scroll position of an element