In the previous lesson,
I had briefly introduced you to the Lifecycle Methods of React Components.
We had already examined
the lifecycle methods that are invoked when the component gets mounted.
So, when we were looking at the react application example in the previous lesson,
the component was just getting mounted at the top.
Now, we have two components,
the Menu component and the DishDetail component.
You'll see that when you click on any of the menu items the DishDetail component
gets re-rendered with the new details of the selected Dish.
So, in this case, periodically,
that DishDetail components view needs to be updated whenever a new menu item is clicked.
So that means that the DishDetail component will undergo an updating stage.
So, let's look at the lifecycle methods that are invoked when a component gets updated.
So again, reminding you that
the lifecycle methods are invoked at the point of mounting of a component,
the updating of a component,
and unmounting of the component.
When a component is being updated,
there are several lifecycle methods associated with this process.
So these lifecycle methods are called when
a component is being re-rendered or being updated.
Now, this could be caused either because
the props that are supplied to the component changed,
or the internal state of the component changed.
So whatever be the reason,
the component is re-rendered and at that point we have
access to several liifecycle method hooks that are invoked.
Now, the getDerivedStateFromPops and render,
you have already seen associated with the mounting.
The same are also available when the component is being updated.
In addition, we have a method called shouldComponentUpdate.
This method will return a Boolean variable.
If the component will never get updated during your lifecycle,
then you can return a false from shouldComponentUpdate to inform
your react's rendering process that this component will never update so
you don't even need to consider this while you're re-rendering the Doc.
Now, normally we just ignore that point but if you wish to you can
include that into certain components but
be clear that the component will never update once it is mounted.
The render will be called every time the component is re-rendered.
So, every time you update the props of the stage for the component,
the render has to be called,
and so the component is re-rendered.
Similarly, you have access to a method called getSnapshotBeforeUpdate.
This may be needed in situations,
for example, when you're scrolling,
you have this scrollbar in a component and you're
scrolling and you want to remember the position of
the scroll at the point so that when the component
re-renders then you will retain that scrolling position,
then that would be useful for saving the information.
Now, the other method that we will see is the componentDidUpdate method.
This method, as you would expect,
is invoked when the component is updated.
So, let's go back to our application and then examine a couple of things.
We'll look at the use of the render and the componentDidUpdate.
Now, we will go into the DishDetail component and then configure that
to check to see how these methods are being invoked.
Also, this is a good stage for me to remind you
that there are two methods that when associated with updating
of a component that were used earlier
called componentWillReceiveProps() and componentWillUpdate().
These two methods have been duplicated starting with React Version 16.3,
and so you are discouraged from using these anymore in your React Application.
Now going to my application,
in the Menu component let me copy this componentDidMount
from the Menu component and then I will paste it into the DishDetail component here,
so that we'll see that the componentDidMount()
for DishDetail components will be invoked at that point.
Now, in addition, since the DishDetail component
doesn't have a constructor and actually you don't need it,
so that's why I don't have the constructor method.
Now, in addition to the componentDidMount,
we will also invoke the componentDidUpdate method in the DishDetail component,
and then in here,
I will log
this DishDetail component componentDidUpdate invoked,
and then we will also include this into
the render method of our DishDetail component.
So DishDetail component render invoked.
Let's save the changes and then go take a look at
our application and see the changes in the JavaScript console.
Going to our browser where our application is rendered,
you can see that in the JavaScript console,
you see the Menu component constructor invoked,
Menu Component render invoked,
and then the DishDetail component render invoked,
and the Menu Component's componentDidMount invoked,
and then the DishDetail Component's componentDidMount invoked,
so they are called in their order.
Now you are wondering why the Menu components
componentDidMount was called after the DishDetail Component rendered was invoked.
This was invoked because in the Menu component's to render better,
we had included the DishDetail component into the Menu components then the render,
so the DishDetail Component has to be created and
then it's random method has to be invoked.
And then at that point,
the Menu component finishes mounting into the top.
So that's where you'll see the sequence of methods being invoked.
Now, let's click on one of the items in the menu.
So when I click on the item in the menu, you would see that,
that particular item is rendered at the bottom here,
and then at that point,
again, look at the sequence of the invocations of the methods.
So you see that the Menu component render is invoked
because you now changed what is in the Menu components are render invoked.
The DishDetail component is render invoked,
and notice that the DishDetail components componentDidUpdate method got invoked here.
So, that's the reason because only are
the DishDetail component was attached
the DishDetail component was not rendering anything,
it was rendering an empty dev earlier,
but when we selected a dish that selected dish gets rendered in to
the view there so that's why you see
that the Menu component is invoked again and the DishDetail component.
One more time, let me click on another item and
then you would see that the sequence is still maintained,
the Menu components render is invoked,
the DishDetail Component's render is invoked,
and the DishDetail Component's componentDidUpdate is invoked here.
So that demonstrates to you how that lifecycle methods in
both the mounting phase and in the updating phase are invoked for your components.
Now, although we had made changes to these item,
you can easily delete all those console logs from your files.
You don't need to save those console logs,
those were meant just to illustrate to you
how the lifecycle methods are actually invoked.
Jogesh K. MuppalaAssociate Professor
