Lifecycles

[00:00:00]
>> The next thing here is the life cycles and the life cycles are they're useful for a number of things. Basically, you might we already showed that you could just run something in the component body so why would you bother with onMount or Whatnot. Sometimes though you wanna wait until after the DOM has loaded before you start something so it's a good place to like measure the DOM or use your references but yeah I mean the simplest example of using onMount although we'll show later a better way to do this is you could use it maybe to load some data, right?

[00:00:47]
We could maybe make an async function that fetches from an API. And We, in our case, we're gonna fetch some photos. And then all we have to do is when we get our response, we just set the JSON to our signal and we should be good and let me just grab the URL for this grab 20 items from the placeholder API.

[00:01:18]
And yes, it's a bunch of lovely, lovely images. But as you can see async it's fairly easy in this kinda scenario. And what's cool about a reactive library like Solid obviously is when you do that fetch, and you sent that signal, it's not like, again, the componentry renders or anything and literally just went, now there's photos in this list, create these DOM elements.

[00:01:44]
So it's kinda like a pause, like he can render the outside and then continue on as the data resolves. onCleanup is something that we've been avoiding in all our demos so far, but it's actually important because sometimes, if you set an interval at the top of your component and it unmounts you actually want that interval to go away.

[00:02:08]
As powerful as this is we still need to be able to potentially clean up after ourselves. So. What's powerful here is something you can do top level. So I made a timer. We can ensure that even with our counter, that when this cleans up, that we're going to actually call this, right?

[00:02:34]
When it, because if you think about it, these are all nested effects. So it's the same rules again. So if I put this inside an effect, let's say, let's create effect. We could, we can also. I can also do the same thing To close here, right? And playground is not having fun with me today.

[00:03:11]
All right did I put an extra bracket somewhere that's probably it Can I just copy this code and then I'm gonna refresh the whole page. Create effects not defined obviously hear we go. Okay. This is just what I was trying to demonstrate here because we if we console if we just kinda.

[00:04:08]
Again, I don't know why you would wanna do this exact thing that I'm gonna do right now, but if we wanted to console.log("Cleanup") and literally rerun this thing, Every single, every single time like say the count changed which is kinda crazy main.tsx. I'm missing a semicolon. Thank you.

[00:04:52]
This is why live coding is always the best. All right, cuz I didn't close my effect, right? Like if we wanted to do something silly like listen to count in here. This is gonna stay zero now. But essentially, every time we update count it should run our cleanup function.

[00:05:18]
Alright. See, clean up, clean up, clean up, or it's actually counting up. Yes. So just froze. So you actually see cleanup also, logging down there in the console, every single run. So we can clean up both at a effect level scope and a component level scope.