All language subtitles for 043 React Lifecycle Methods - Mounting_en

So in order for us to understand, I'm just going to look quickly at this life cycle component that

I've written, it's just called life cycles, right?

That's all it is.

It's just a component called Life Cycles, which is a class component, extending the Riak component.

So.

Inside of here are the possible life-cycle methods that we want to look at, and inside of each one,

I'm just logging the name of the life cycle that it is, so that when it gets called and we look in

our console, we'll see the order in which they're getting fired.

Now.

Before we take a look into what these life cycles are, there's actually a diagram we can look at on

the React website.

And on this diagram, it will show us in this graph form when each method fires, depending on what

phase the component is in.

So the first phase we're going to look at is the mounting phase.

The mounting phase is the phase when the component is being put on the dome for the first time.

So when it's mounting, when it's in the mountain phase, it starts before our component is actually

on our door, right before it's on our page, when it starts mounting, it first looks at the component.

So for us, our life cycles component.

And then it sees the constructor and it calls the constructor first, so inside of our constructor we

have our super right and the super is pretty much just a method on all classes inside of their constructors

that say, if I'm extending from some other class component, I want you pull in all of their methods

and all of their functionality.

Right.

Which might sound complicated, but all you need to know is that what that does is it allows our class

component to have access to these lifecycle components, because you can see it as if these lifecycle

components and when they get called in the order of all this functionality is actually originally bound

to this react component, this Riak class component that we need to borrow from.

So we're essentially saying extend me all of that functionality into my class component called lifecycle,

and then the constraints of the constructor when we call super, it's like, OK, this is when I want

you to give me all that functionality, right.

So that I can bind it all to my class component inside of the constructor as well is when we can declare

our state right.

So when we call this DOT state, we do it inside of our constructor specifically for this reason, because

this is when our state becomes initialized on our class.

So the constructor gets called first for this reason, so that our components, other lifecycle methods,

if they need to use the state, are aware of the state because it's initialized inside of our constructor.

After the constructor, call it, then, calls are render method and the render method is when our component

tells JavaScript.

OK, this is what I want you to display in terms of HTML.

This is also where any prop values get evaluated in the HTML.

So because we're passing in that text string, this is when JavaScript is like, oh, I'm calling the

render method on this class.

I'm also going to evaluate the value of this prop text and then turn it into something that I can display

in the HTML.

And that's how we're able to see that string value that we get passed in as a prop or anything, for

that matter.

This evaluation is happening inside of our render call.

After the render comes, when React actually updates the dawn, right, or it makes updates to our component,

but the main thing here is where reacts like, OK, now that I know what the component looks like because

of the render and I know what state and whatever things are on the class component because of the constructor,

I'm now going to put it on the page.

I'm going to mount it.

And then once it mounts, the component did mount.

Lifecycle method gets fired, and inside of here is where it's like, OK, the component has mounted,

it's in its base state, right?

It's properly evaluated.

Then I'm going to call my lifecycle method component did mount.

And if we look at our application.

We'll see that that's the order that it happens, we got the constructor first, then the renderer gets

called and then our component dismount gets called.

And usually this is where after we've loaded our base, our class component inside of a component did

mount is where we start to do things like our API calls.

If you remember from our earlier instance where we made an API call to get all the users for our monster's

Rolodex.

And the reason for this is because we want to load the base component first before we start fetching

data and updating our component so that it looks different from the Baystate.

Right.

Because we don't know how long the API call might take.

Latency might be slow.

Your connection might be poor, but this is the order.

And how we should leverage this lifecycle method is that we wait for the base component to mount and

then we're like, OK, let's use our component at Mount Method to update it into its next state and

this next state.

This updating phase is the next phase of our component.

After the base mounted state.

Is on our Don.

So let's take a look at the next phase, the updating phase.