How to stop setInterval() in React

Question

I use setInterval() to send GET request for state updating. I also use clearInterval() after the update process complete.

//
// getSynProcessState used for updating data by sending GET request to an API after every minute
//
     
      intervalID = 0;

      getSynProcessState = () => { 
          // get total and current sync
          this.intervalID = setInterval(() => { 
            axios.get('http://mySite/data/')
            .then(res => {
              console.log(res.data)
            });
          },1000);     
      }

//
// clearInterval() will run if this.state.isSyncStart === false
//
    componentDidUpdate() {
        
        if (this.state.isSyncStart) {
          this.getSynProcessState() //setInterval()
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        } else {
          clearInterval(this.intervalID)
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        }

      }

As you can see that when [this.state.isSyncStart === true] => setInterval() run OK But when [this.state.isSyncStart === false] => clearInterval() run but the GET requests keep sending

setInterval return you an id, you can use that id in clearInterval(id) method stop it — Harmandeep Singh Kalsi, Jun 29 '20 at 14:22
He is already doing it inside code @HarmandeepSinghKalsi, maybe just use setTimeout? Or this could be related by React spec. — halilcakar, Jun 29 '20 at 14:23
Does this answer your question? [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — benbotto, Jun 29 '20 at 14:23
`getSynProcessState` fires twice, so you're overwriting `this.intervalID` and thus losing it. Don't start the interval twice. You could check if `this.intervalID` is set in `getSynProcessState`, for example. — benbotto, Jun 29 '20 at 14:26
The weird thing is the code inside else is running, that means clearInterval() is running too. But still can't stop the setInterval() keep runnig :| — Tùng Sơn, Jun 29 '20 at 14:27
Yeah, but look at the log. You set the interval twice, then clear it once. You lose the context of the first setInterval call. — benbotto, Jun 29 '20 at 14:28
Also, why is the `setInterval` even there? What is the purpose? — Kokodoko, Dec 28 '22 at 13:36

score 0 · Answer 1 · answered Jun 29 '20 at 14:27

You are overwriting the current interval in your componentDidUpdate call. Do a check e.g.

 if (this.state.isSyncStart) {
          this.interValID == 0 && this.getSynProcessState() //setInterval()
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        } else {
          clearInterval(this.intervalID)
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        }

score 0 · Answer 2 · answered Jun 30 '20 at 04:07

I somehow solved the problem by adding runOnce and set it in the 'If' Condition. Maybe it prevent the overwriting on [this.intervalID]

runOnce = true

  getSynProcessState = () => {
    if (this.state.isSyncStart && this.runOnce) {
      this.runOnce = false
    
      this.intervalID = setInterval(() => { 
        axios.get('http://192.168.51.28:8031/process/')
        .then(res => {
          console.log(res.data)
          // this.setState({
          //   total: res.data.total,
          //   current: res.data.current
          // })
          // console.log('1: ' +this.state.total)
        });
      },200);
    } else {
      clearInterval(this.intervalID)
    }
  }

  componentDidUpdate() {
    this.getSynProcessState()
  }

That's the same thing as I said in my comment, and that Murat Karagöz posted in his answer. You used a superfluous flag to accomplish the same thing with extra code bloat. — benbotto, Jun 30 '20 at 14:14

How to stop setInterval() in React

2 Answers2