We have just completed learning about a React component.
We have seen how we can create a React component by
defining a class and sub-classing the React component class.
Now, in the next module,
we'll learn about other kinds of React components.
Like for a class component in a React application,
every class component has a life cycle associated with it.
What exactly is a life cycle?
Let's briefly talk about that.
As we realize, a React application is made up of multiple React components that
are connected together to form the entire screen of your React applications view.
Now, each React component as in when it is required will be created by React
and then added into the DOM of your entire application.
So, every time a React component needs to be included into your applications view,
then the component that hosts the specific part of the view will be
created and added into the overall React component hierarchy.
So, a component passes through what we call as the life cycle for the component.
Now initially, the component doesn't exist,
then the component gets created and then once it is created,
then it can be mounted into your React application
at an appropriate point in the hierarchy of components,
then it will exist at that point for a period of time and then subsequently,
maybe you no longer require that view,
and so at the point,
the component can be removed from this hierarchy.
So that will be an unmounting of the component.
So, as you realize,
a component passes through a life cycle of creation,
mounting, and then existing in the hierarchy,
then unmounting, and then disappearing at the point.
Now in every stage of this life cycle React provides several life cycle hooks
or life cycle methods that can be invoked to perform certain operations.
So again, to summarize what I have just discussed,
a React component goes through
the following life cycle stages: the mounting of the component
after creation and in between if the view of the component needs to be updated,
then it gets updated.
So at that point, it will be in the updating stage,
and then when that component is no longer needed,
it'll be unmounted from the hierarchy so that will be
the unmounting stage of the life cycle for your component.
Now, as I mentioned,
there are several life cycle methods that are available in each stage.
The mounting stage, the updating stage,
and the unmounting stage.
So, these life cycle methods will be in invoked by React as
your component is passing through these stages of its life cycle.
Let's examine some of these life cycle methods.
Later on we will understand how we can make use of these life cycle methods to perform
certain operations required when
a component is passing through a particular stage of its lifecycle.
Let's first talk about
the life cycle methods that are available when the component is getting
mounted into the overall hierarchy of the React components.
Now in the mounting stage,
these methods that are available, a constructor, getDerivedStateFromProps,
render, and componentDidMount methods are
invoked when an instance of a component is created and inserted into the DOM.
So, at that time,
when it gets mounted into the DOM at that point these methods are going to be called.
The constructor will be called first,
the render will be called then,
then the componentDidMount will be called,
and so the componentDidMount will be
called after your component gets mounted into the DOM,
and then the view is rendered into the overall view of your application.
Now, if you see some of the older React documentation or some of the older examples,
you might also encounter people using another method called componentWillMount.
Now, with the React 16.3,
this method has been duplicated and you're no longer advised to use this method.
From 17.0 onward this method will be completely removed from React.
So, we would desist from using this method in our React application.
We will only use the constructor
then quite the render method obviously has to be used every single time.
The componentDidMount will be used when you need to
execute something after the component gets added into the DOM.
Then the getDrivedStateFromProps will be used if required.
Although I don't have an example to illustrate that to you.
Now, we'll look at an example of how we can make use of some of
these mounting life cycle methods by modifying
our application that we have been working on to see that
these life cycle methods indeed get called as the component is getting mounted.
At a later stage,
in another module we'll come back to the methods that are used
when a component is being updated and also when a component is being unmounted.
To help you understand how the life cycle methods are invoked,
let's go to our application that we have been working
on so far and in the menu component.
Now, you'll see that in the menu component that we have created in our application,
the constructor is already included there.
So, the constructor will be invoked when the menu component is created.
So, to illustrate to you that indeed this is going to be called,
I will put a simple console log statement in there saying,
"Menu Components constructor is invoked".
So that way, you can see in the console log that this indeed was called.
Now, similarly, I will take
this same console log and then we will use it in the render method.
So in the render method.
I'm going to also invoke that console log.
So, "Menu components render is invoked",
and let me add in a new method here,
new life cycle method here called componentDidMount,
and this method will be invoked again will test,
receive and this method is invoked.
So, we'll say componentDidMount and then I'll do a console log saying,
"Menu componentDidMount is invoked".
Now, I will add this in here just to illustrate to you that
these life cycle methods are indeed being called as the component is getting mounted.
So, in this example,
we see that when our React application gets created,
the App.GS will mount the menu component into its view,
and so at that point the menu component gets created and added into
our overall DOM for our React application.
So, let's execute this and then watch
the JavaScript console in our browser to see when these methods are getting invoked.
Going to our browser,
you'll see that our application has been rendered just like before.
There is no change to the view of your application,
but let me open the JavaScript console.
So here, I'm going to the view.
Developer JavaScript console.
If you're using another browser,
then you would similarly be able to access
the JavaScript console in the browser using a similar approach.
Look for the developer tools,
which are part of your specific browser that you are using.
So, again going into the JavaScript console,
you can see here that first statement that says,
menu component constructor is invoked.
Then, the next thing that is printed in the console says,
menu component render is invoked, and then finally,
Menu componentDidMount is invoked.
So you see how these three methods are invoked in that sequence,
as your component get mounted into your DOM by your reactor application.
So, this methods will allow you to get access to the component
at various stages of its creation and mounting into the DOM,
and if you need to perform any operation during that period,
you can include the appropriate code into that specific location,
either in the constructor,
or in the render,
or in the componentDidMount methods.
Now, we have already seen that in the constructor,
we are initializing the state for the component,
right within the constructor.
So, that is one use of the life-cycle method.
Similarly, if we want to do something after the component is mounted into the DOM,
then we can include that in the componentDidMount method.
Now we will see the use of that in one of
the later exercises in the last module of this course.
As we are working on our React application,
let me also draw your attention to a developer tool that is available for React,
called as react-devtools which is available.
This is the GitHub repository for it.
This is an extension that gets added to your browsers,
either Chrome or Firefox,
or even available as a standalone app,
if you would prefer to use it.
Now, in my case since I am using the Chrome browser,
I'm going to install the Chrome browser extension,
and then make use of it within my application.
So this is an interesting tool
that will be very useful as you're developing your React application,
because you can easily watch
things when your React application gets created and rendered,
then you can see various aspects of your React application including the DOM hierarchy,
which will enable you to check for any errors.
So if you encounter any problems in the way the views are rendered,
then you can go and check in the React developer tools.
Let me show you react-devtools for the specific application that we have been working on.
Now before we do that,
if your want to add the developer tools,
go to the appropriate browser extension there,
and then add it into your browser.
So for Chrome, you go to the Chrome dev store and then from there
add the extension for Chrome, similarly for Firefox.
If you want to use a standalone app,
then you can download that and then make use of it.
Now, I find that it is a lot more easy for me to integrate the extension into my Chrome,
because I'm already using the console log for watching the JavaScript console,
and so the react-devtools will add one more tab to
that developer tools window that I bring up at the bottom of my browser,
and so it is more convenient for me to use the react-devtools that way.
Now, a link to the react-devtools is available in
the additional resources off this section.
Now going to my React application,
right there in the developer tools,
I have the react-devtools installed there.
So, when you open it you can see the structure of your DOM there,
so you can see the app here.
Now, the advantage of doing this is that you can go in and watch
all the aspects and see
all the properties that are being sent to each one of these components,
and also for example in the menu,
you can go into the menu and then see the props that have come to the menu,
so you can easily find out whether your props are being correctly
passed into the menu item or not,
and so on, and then when you click on a particular dish as you realize,
you're going to be rendering that particular dish there.
So the details of the dish are shown down below here,
and you would also see in the React developer tools,
you can see the state here,
and you can see that the selected dish is
initialized to that dish that we just selected there.
So, that's the advantage of react-devtools.
It will allow you to go in and see the different aspects,
the different parts of the application,
and be able to check to see if you are encountering any errors.
If the props are been correctly passed,
if the step is correctly initialized,
all these can be easily useful while you're developing your React application.
So, take advantage of the react-devtools to help
you track as you develop your React application.