Using setInterval in React Component

Question

I was reading the tutorial on the official react website. In the example about life cycle methods, under the componentDidMount method, a timerID is set to the setInterval fu

Answer 1

this.timerID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval to clear the timer.

So when calling the setInterval in componentDidMount like

componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

you want to execute the tick() function every 1 sec after the component has mounted. Now when you navigate to another component and your current component has unmounted, if you do not clear the interval call to tick() function, it will continue to be executed.

Hence in the componentWillUnmount function you timer is cleared which is identified by the numeric value returned by setInterval which is stored in this.timerID

componentWillUnmount() {
    clearInterval(this.timerID);
  }

so the complete code as provided in the React docs is

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

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Answer 2

In this react document it's written that

We will tear down the timer in the componentWillUnmount() lifecycle method

So, this.timerID will be used in componentWillUnmount() lifecycle method to stop timer.

Answer 3

It's Simple. As soon as it React executes componentDidMount() life cycle method, the timer starts running.

this.timerID = setInterval(
      () => this.tick(),
      1000
    );

The above timer will run until the component gets unmounted (according to your code). It's not a surprise that your code works that way.