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 function.

My question is even though the timerID was initialized, it was never called throughout the application, how does the application work without explicitly calling timerID anywhere in the application. Here is the code below.

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')

);

@KyleRichardson sorry for the inconvenience, I have now included the code in the question. — Kwabena Badu
– Kwabena Badu, Commented Jul 18, 2017 at 5:28

Shubham Khatri · Accepted Answer · 2017-07-18 05:31:18Z

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')
);

Lakshitha Ruwan · Accepted Answer · 2017-07-18 05:45:08Z

0

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.

answered Jul 18, 2017 at 5:45

Lakshitha Ruwan

9691 gold badge9 silver badges12 bronze badges

Comments

Ali Rehman · Accepted Answer · 2018-10-11 12:11:14Z

0

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.

edited Oct 11, 2018 at 12:11

answered Oct 11, 2018 at 11:34

Ali Rehman

3,8914 gold badges25 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using setInterval in React Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related