How to clear an interval set in this particular way

Question

I am working in react. I want to clear my interval on componentWillUnmount

The interval is set as this

setInterval( () => this.baz(), 1000 );

Following this answer here Referencing "this" inside setInterval/setTimeout within object prototype methods

How do I clear that. I am sorry if this is a basic question

score 4 · Accepted Answer · answered Jul 12 '18 at 19:34

Save a reference to the intervalID on the component (this.intervalID), and clear it in componentWillUnmount:

class Demo extends React.Component {
  componentDidMount() {
    this.intervalID = setInterval( () => this.baz(), 1000 );
  }

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

  render() {
    //...
  }
}

score 2 · Answer 2 · answered Jul 12 '18 at 19:33

setInterval returns an ID when you call it. You simply need to save that and pass it to clearInterval(). You can very easily save that in your state:

this.setState({ intervalId: setInterval(() => this.baz(), 1000) });

And then in componentWillUnmount():

clearInterval(this.state.intervalId);

How to clear an interval set in this particular way

2 Answers2