0

In my React app, I'm using setInterval() to create a stopwatch effect. It's important to note that this can be a long running clock -- it could be on for 3-4 hours provided that the user is still on the "page" which is a strong possibility because it's a business app. In one module, I actually have two of them that may run simultaneously.

When the user clicks to start the clock, I simply commit the current date/time into my redux store and every second I go into the tick() function to calculate the time difference and save it in my store in a pretty format that makes it look like a stop watch i.e. 01:03:07

It's working fine except, sometimes it doesn't respond to my click to stop the clock immediately. There's a small delay after I click the button. I really can't put my finger on it yet because sometimes even after running for a long time, it works fine but I sometimes think the longer this runs the more side effects it may have. Maybe I'm wrong but that's why I'm asking this question.

Could there be memory penalties or other negative effects due to using setInterval() if my clock is running for a long time?

Here's my approach:

class MyComponent extends Component {

   constructor(props) {
      super(props);
      this.tick = this.tick.bind(this);
   }

   state = {
        elapsedTime: ""
    };

   componentDidMount() {

        this.interval = setInterval(this.tick, 1000);
    }

    componentWillUnmount() {

        clearInterval(this.interval);
    }

    tick() {

        // Calculate elapsed time using function I created.
        const elapsedTime = getElapsedTime(startTime);

        this.setState({ elapsedTime: elapsedTime });
    }

    render () {

        return(

            <div>{this.state.elapsedTime}</div>
        );
    }
}
Sam
  • 26,817
  • 58
  • 206
  • 383
  • I don't know of any negative effects from prolonged setInterval use (sounds like a doctor) but I wonder what how big the delay is? Perhaps you can run it a while, turn on the profiler and then stop it. It could be a classical case of browser reflowing or perhaps a major GC kicking in? Also, can you try this in a smaller setting so as to eliminate the rest of the app creating garbage etc ? – JGoodgive Feb 03 '18 at 16:33
  • As I mentioned, I really can't put my finger on it yet because it doesn't happen all the time but when it does, the delay is noticeable, about 2 seconds. Long enough the make the user click it again. – Sam Feb 03 '18 at 16:35
  • The problem could be in a number of places. The problem may not be with another component on the page, or in your redux store. It's pretty tricky to provide useful feedback without seeing the actual code. – shadymoses Feb 03 '18 at 16:50
  • The delay doesn't even have to BE a delay. You could be stopping the timer exactly on the click (I assume by calling tick() and clearInterval()), but setting state doesn't necessarily happen immediately, setState always returns immediately, but the change can happen after: https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately – billjamesdev Feb 03 '18 at 17:31

0 Answers0