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

//
// 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);     
      }

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

//
// 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
//
    ponentDidUpdate() {
        
        if (this.state.isSyncStart) {
          this.getSynProcessState() //setInterval()
          console.log('ponentDidUpdate: ' + this.state.isSyncStart)
        } else {
          clearInterval(this.intervalID)
          console.log('ponentDidUpdate: ' + 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

• javascript
• reactjs
• asynchronous
• setinterval
• clearinterval

• 1 setInterval return you an id, you can use that id in clearInterval(id) method stop it – Harmandeep Singh Kalsi Commented Jun 29, 2020 at 14:22
• He is already doing it inside code @HarmandeepSinghKalsi, maybe just use setTimeout? Or this could be related by React spec. – halilcakar Commented Jun 29, 2020 at 14:23
• Does this answer your question? Stop setInterval call in JavaScript – benbotto Commented Jun 29, 2020 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 Commented Jun 29, 2020 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 Commented Jun 29, 2020 at 14:27

2 Answers 2

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

  ponentDidUpdate() {
    this.getSynProcessState()
  }

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

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