React Components: Lifecycle Methods Part 2

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

46 ratings

The Hong Kong University of Science and Technology

Front-End Web Development with React

46 ratings

Course 2 of 4 in the Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

From the lesson

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.

Presentational and Container Components6:58

Exercise (Video): Presentational and Container Components21:46

React Components: Lifecycle Methods Part 28:16

Functional Components3:41

Exercise (Video): Functional Components14:02

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play