FAQ: Mounting Lifecycle Methods - componentDidMount

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!

the “alert(‘YOU JUST WITNESSED THE DEBUT OF… FLASHY!!!’);” appears before rendering, even though I put it within the componentDidMount() property

2 Likes

I have the same issue. Is this CodeCademy’s bug?

1 Like

So far just about everything in the advanced react course has already been completed. Every box that you can check has been checked and all the code has been completed for me. A bit counter productive.

This is not a Codecademy’s bug.
Tried it in a sandbox of React, and the same happens.

Seems to have a disconnection between rendering and actually displaying the content of the DOM on screen. I searched a lot for it on Google, but found nothing so far.
Some clarification from the authors would be appreciated.

4 Likes

The lesson says,

You’ll put lifecycle methods into practice in this course’s final project, and then more in the next course!

And where is “this course’s final project” and which is “the next course”? The syllabus of Learn ReactJS: Part II doesn’t mention neither.

I have a feeling I am not the only that has been feeling frustrated since the second half of the Web Dev course started. Courses are often like drafts with little or wrong details, too simplistic, sometimes have bugs and “hints” were dropped altogether. This might not be the place to post that, but where else? Codecademy didn’t even reply to the questions in this thread…

2 Likes

Over a year since your post and the same is happening to me as well

Ran into the same issue. I submitted a bug in the Get Help section.

According to the official docs, componentWillMount has been depreciated.

In part 1/5, under “What’s a lifecycle method?”, it says…

You can write a lifecycle method that gets called right after a component renders, every time except for the first time.

I assume it is referring to componentDidMount, as taught in part 5/5, but from my understanding what actually happens is the opposite of the above quote. componentDidMount is called only once, after the first render of the component. Any subsequent render of the component does not invoke the componentDidMount method. The part 5/5 exercise seems to prove that.

Can someone confirm this just so I’ve understood the functionality of componentDidMount correctly?

Hi, in this updated lesson, does anyone knows why we don’t have to bind this to the startInterval function but also works well when calling them?

import React from 'react';

export class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  startInterval() {
    let delay = this.props.isPrecise ? 100 : 1000;
    this.intervalID = setInterval(() => {
      this.setState({ date: new Date() });
    }, delay);
  }

  render() {
    return (
      <div>
        {this.props.isPrecise
          ? this.state.date.toISOString()
          : this.state.date.toLocaleTimeString()}
      </div>
    );
  }
  componentDidMount() {
    this.startInterval();
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
  componentDidUpdate(prevProps) {
    if (this.props.isPrecise === prevProps.isPrecise) {
      return;
    }
    clearInterval(this.intervalID);
    this.startInterval();
  }
}

Hello @kueichih ,

It wasn’t necessary to bind this because of the arrow function that was used. Arrow functions use lexical scoping and maintains the reference necessary to be able to call this.setState(). Here’s an article about some differences: Learn ES6 The Dope Way Part II: Arrow functions and the ‘this’ keyword

To further explain and demonstrate, if we add a console.log(this) here:

    this.intervalID = setInterval(() => {
      console.log(this);
      this.setState({ date: new Date() });
    }, delay);

image
this maintained the reference to the Clock object

However, if we use an anonymous function instead of an arrow function:

    this.intervalID = setInterval(function() {
      console.log(this);
      this.setState({ date: new Date() });
    }, delay);

image
this is now the Window object and can’t use this.setState()

1 Like

Oh, I get it. Thanks for your help, @selectall !

what is the this.props.isprecise in the code . What does it do ?

@mjmj1234 welcome to the forums!

isPrecise is a prop being sent to the Clock component. We only have access to Clock.js in this lesson, but we do know that it’s a boolean. The purpose of it is to tell our clock how often the time should be updated. The default is 1 second, but “precise” mode is every 100ms. You’ll be building out this functionality during the lesson.

<Clock isPrecise={true} />

<Clock isPrecise={false} />

is an example of how the Clock component we are working on could have been used and why we can use this.props.isPrecise in Clock.js

1 Like