React - Async background API calls

Question

Our team is working on a webapp / game where we want to make an API call every 8 seconds if a condition is true. This process is triggered by a button which starts the populate method

async autoLoad() {
        const timer = await 8; 
        console.log('debug consolelog')           
        const result = await this.UpdateProfile();
    }

togglePopulate() {
        const status = this.state.autoLoad;
        if (status === true) {
            this.setState({ autoLoad: false });
        } else {
            this.setState({ autoLoad: true });
            this.autoLoad();
        }
    }

Our understanding was that this would run the 'UpdateProfile()' function in the background every 8 seconds. The result, however, is that our entire webpage locks up and the UpdateProfile (or the debug console.log) is not run.

Does anyone have an idea what we are doing wrong? (Or if what we are attempting to do is even possible?)

Answer 1

No offense, but I think you may be misunderstanding how async await works if you are trying to set the timer via, const timer = await 8. You may want to read up on some articles that describe exactly what Async Await returns to you.

However, setting a function to be called on a timer is actually kind of confusing with React. I feel like this is more of the problem that you are having. I hope this example helps you.

class Example extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      interval: null
    }
    this.enableAutoload = this.enableAutoload.bind(this)
    this.disableAutoload = this.disableAutoload.bind(this)
  }

  enableAutoload() {
    const setTimer = window.setInterval(() => {
                      this.iRunEveryEightSeconds()
                     }, 8000)
    this.setState({ interval: setTimer })
  }

  disableAutoload() {
    console.log('Clearing the timer from state...')
    const clearTimer = window.clearInterval(this.state.interval)
    this.setState({ interval: clearTimer })
  }

  iRunEveryEightSeconds() {
    console.log('Hello There.')
  }

  render() {
    return (
      <div className="example">
        Example API Call Every 8 Seconds

        <button onClick={this.enableAutoload} className="enable">
          Enable Autoload
        </button>

        <button onClick={this.disableAutoload} className="disable">
          Disable Autoload
        </button>
      </div>
    )
  }
}

ReactDOM.render (
  <Example />,
  document.querySelector('#app')
)

I know that you need to run this API call when a specific condition is met. You can use this example to see how to set the timer into state when the condition is true, and clear the interval in state when it evaluates to false. Make sure to check out the console in the Codepen example below after you click the enable button, and when you click the disable button. "Hello There" will stop being printed every 8 seconds after you click the disable button.

The included Codepen example, will help you out further. Any questions, please ask!