FAQ: Mounting Lifecycle Methods - componentWillMount

Frequently Asked Questions React.js FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “componentDidMount” exercise from the lesson “Mounting Lifecycle Methods”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part II

FAQs on the exercise componentDidMount

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Why are we utilizing an unsafe method as stated in the React official docs?
" Avoid introducing any side-effects or subscriptions in this (componentWillMount()) method. For those use cases, use componentDidMount() instead."

2 Likes
3
4

step-by-step explanation was very useful :ok_hand:

5

How is react able to tell that the two Flashy components are one and the same? They are rendered by two separate calls to ReactDOM.render(). It’s hard to see how react doesn’t call componentWillLMount both times. I can understand React being able to keep track of components rendering history if those components were re-rendered by a call to setState in one of their methods, but seperate calls ReactDOM.render don’t seem to be attached to that one Flashy component.

6

Why do we have to use an extra anonymous function to encapsulate the this.setState in setInterval( )? I understand that setInterval needs a function as its first argument, but this.setState already satisfies this criteria. Why can’t we enter this.setState directly, without using any ( ) => { }; If anyone has an answer for this I would greatly appreciate it.

7

this.setState is a function. But this.setState() isn’t a function, here you are calling the setState and by calling it you are returning its return value.

And because we want to pass an argument to setState we can’t do it directly in setInterval(this.setState({})) because now we aren’t passing a function to setInterval. that’s why we are using an anonymous function to solve this problem. setInterval( () => this.setState({})) now we managed to pass a function to the setInterval also we successed to pass an argument to this.setState

8

They should have explained how we suddenly got the date. All it says is “new Date()” and magically we have a date time? Where did the date time come from?

9

Confusingly, the Date object type is in fact a datetime, not just a date.

new Date() generates a Date object set to the date and time value of whenever its called. This every time it gets called, it gets the new date & time.

10 
componentDidMount() {
    const oneSecond = 1000;
    setInterval( () => {
      this.setState({ date: new Date()});
    }, oneSecond);
  }

In the above code what object does this refer to even though it is declared inside an arrow function ? @stetim94 Any help in understanding the various use of this would be highly appreciated.

11

Ngl these past few modules have been hella confusing. JSX module was easy to understand though

1 Like
12

In the context of this exercise , if componentDidUpdate() is called after render is called, how is the changes in date being displayed on the screen