componentDidMount is invoked when a component has been inserted into the DOM. Here are some common use cases for this method:

• Calling a web service to get some data
• Adding event listeners
• Initializing timers
• Initializing third-party libraries 

We're going to change the app we have been building to give users a time limit of 10 seconds to confirm whether or not they want to learn React and TypeScript. In order to do this, we'll need to make use of the componentDidMount method:

1. Let's start by making the confirmation dialog closed when the app loads in App.tsx:

constructor(props: {}) {
  super(props);
  this.state = {
    confirmMessage: "Please hit the confirm button",
    confirmOpen: false
  };
}

2. We're going to count down the seconds from 10 to 0, and then hide the Confirm button when 0 is reached. Let's add and initialize a state for both of these in App.tsx:

interface IState {
  confirmOpen: boolean;
  confirmMessage: string;
  confirmVisible: boolean;
  countDown: number;
}

constructor(props: {}) {
  super(props);
  this.state = {
    confirmMessage: "Please hit the confirm button",
    confirmOpen: false,
    confirmVisible: true,
    countDown: 10
  };
}

3. We'll use timer to count down from 10 to 1 in the App class. Let's create a private prop called timer just above the constructor:

private timer: number = 0;

4. Now, let's use the componentDidMount method to initialize our timer:

public componentDidMount() {
  this.timer = window.setInterval(() => this.handleTimerTick(), 1000);
}

5. The timer will call a method called handleTimerTick every second. Implement this method as follows:

private handleTimerTick() {
  this.setState(
    {
      confirmMessage: `Please hit the confirm button ${
        this.state.countDown
      } secs to go`,
      countDown: this.state.countDown - 1
    }
  );
}

We are reducing our counter as well, updating the message shown to the user in this method. We need to do some more work here, though: we need to stop the timer, hide the Confirm button, and tell the user they are too late!

6. Our natural instinct may be to write something like this:

private handleTimerTick() {
  this.setState(
    {
      confirmMessage: `Please hit the confirm button ${
        this.state.countDown
      } secs to go`,
      countDown: this.state.countDown - 1
    }
  );
  if (this.state.countDown <= 0) {
    clearInterval(this.timer);
    this.setState({
      confirmMessage: "Too late to confirm!",
      confirmVisible: false
    });
  }
}

However, this is incorrect, because the state is updated asynchronously, and so this.state.countDown won't have necessarily updated the line after we update it in the setState call.

7. Instead, we need to move this code to the callback in setState:

private handleTimerTick() {
  this.setState(
    {
      confirmMessage: `Please hit the confirm button ${
        this.state.countDown
      } secs to go`,
      countDown: this.state.countDown - 1
    },
    () => {
      if (this.state.countDown <= 0) {
        clearInterval(this.timer);
        this.setState({
          confirmMessage: "Too late to confirm!",
          confirmVisible: false
        });
      }
    }
  );
}

8. Let's also stop the timer if the Confirm, Ok, or Cancel buttons are clicked:

private handleConfirmClick = () => {
  this.setState({ confirmOpen: true });
  clearInterval(this.timer);
};

private handleCancelConfirmClick = () => {
  this.setState(...);
  clearInterval(this.timer);
};

private handleOkConfirmClick = () => {
  this.setState(...;
  clearInterval(this.timer);
};

9. Our final job is to put a condition around the Confirm button to only show it if the confirmVisible state is true:

<p>{this.state.confirmMessage}</p>
{this.state.confirmVisible && (
  <button onClick={this.handleConfirmClick}>Confirm</button>
)}
<Confirm ... />

Now, it's time to give this a try. We'll see the countdown when the app first runs:

If we don't confirm within ten seconds, it'll be too late: