Issue accessing state inside setInterval in React.js

For the functional syntax this should do the trick of accessing props and state inside an interval function:

useEffect(() => {
    //run instantly
    functionThatShouldRunEveryTenSeconds(props);

    const interval = setInterval(() => {
        //every 10 seconds
        functionThatShouldRunEveryTenSeconds(props);
    }, 1000);
    return () => clearInterval(interval);
}, []);

You should be able to access everything like state and props as normal.


You need to execute the interval handler with the correct reference to this. Use React’s autobinding for the cleasest solution IMO:

displayState: function() {
  console.log(this.state)
},
componentDidMount: function() {
    setInterval(this.displayState, 3000)
}

Or use bind if you want an anonymous function:

componentDidMount: function() {
    setInterval(function() {
        console.log(this.state)
    }.bind(this), 3000)
}

In your first example, this is out of scope when the callback function fires. One way to solve this problem would be to use a variable:

componentDidMount: function() {
    var self = this;
    setInterval(function() {
      console.log(self.state);
    }, 3000);
}

The problem with your second attempt is that you are calling the function immediately and passing the result of executing the function to setInterval. You should pass the function itself, taking care to bind the value of this:

componentDidMount: function() {
    setInterval(this.displayState.bind(this), 3000);
}

To clarify, the difference between this approach and the second example in your question is that here, a function is being passed to setInterval (because function.bind() returns a function).

As you are using React.createClass, it is not necessary to manage the binding of this yourself, due to autobind. This means that you can just pass the function itself and this will be the same as in the original context:

componentDidMount: function() {
    setInterval(this.displayState, 3000);
}

Of course, the most suitable approach depends on whether you prefer to use an anonymous function or not.