I've just stumbled upon a performance issue with my app. I'm trying to make a game loop, with a setInterval() function and re-rendering my game constantly with this.forceUpdate(). I've also tried using this.setState() to re-render but they all feel the same. Now, in my gameloop, I'm constantly updating the y position of a blue square (View). It move's but it's a bit laggy.

I set the interval of the setInterval() function to 1000/60 to simulate 60FPS, but in my app, it feels like 20. I've also tried setting the interval to 1, and it's smooth, but it stutters a lot. I get tiny lag spikes that are very disorientating.

I don't think this.forceUpdate() or this.setState() is right in my scenario.

Is there another way I could do this to make the performance better?

UPDATE: I have used the requestAnimationFrame() function as well but it still stutters on re-render. Is there an alternative to this.forceUpdate() or this.setState()? And how would I delay the requestAnimationFrame() loop so it goes off at 60FPS?

Thanks for reading and I hope we find a solution.

I've just stumbled upon a performance issue with my app. I'm trying to make a game loop, with a setInterval() function and re-rendering my game constantly with this.forceUpdate(). I've also tried using this.setState() to re-render but they all feel the same. Now, in my gameloop, I'm constantly updating the y position of a blue square (View). It move's but it's a bit laggy.

I set the interval of the setInterval() function to 1000/60 to simulate 60FPS, but in my app, it feels like 20. I've also tried setting the interval to 1, and it's smooth, but it stutters a lot. I get tiny lag spikes that are very disorientating.

I don't think this.forceUpdate() or this.setState() is right in my scenario.

Is there another way I could do this to make the performance better?

UPDATE: I have used the requestAnimationFrame() function as well but it still stutters on re-render. Is there an alternative to this.forceUpdate() or this.setState()? And how would I delay the requestAnimationFrame() loop so it goes off at 60FPS?

Thanks for reading and I hope we find a solution.

• javascript
• reactjs
• performance
• loops
• react-native

• This is what requestAnimationFrame is for. See facebook.github.io/react-native/docs/timers – Estus Flask Commented Sep 12, 2018 at 0:07
• @estus I forgot to mention, i have used requestAnimationFrame as well, it's smoother but it still stutters a bit. Is there a way i can delay the requestAnimateFrame loop so it only updates to 60 FPS? – Cole Mangio Commented Sep 12, 2018 at 0:20
• I'd avoid using setInterval all together as you run the risk of multiple game loop iterations spawning if a prior iteration does not plete within the 1000/60 – Dacre Denny Commented Sep 12, 2018 at 1:39
• I think it is caused by your render function.It's too Heavy. – gu mingfeng Commented Sep 12, 2018 at 1:45

3 Answers 3

If you're adamant that requestAnimationFrame is not a good fit for your app/game loop, I would suggest using setTimeout over setInterval. The reason is, if a loop iteration takes longer than 16ms (1000/60) to execute, then you'll get iteration overlap - another iteration will start, even if the prior hasn't pleted. Over time, this will cause real problems and can be a cause of stuttering.

As an alternative, try the following (pseudo code):

doLoopIteration = () => {

    this.setState({ /* your mutation */ }, 
    () => { // This callback is fired after a ponent render caused by setState

        // Sechule next loop iteration in ~16ms. This approach protects
        // against the overlap issue mentioned above
        setTimeout(() => this.doLoopIteration(), 1000 / 60);
    })        
}

// Start the iteration
doLoopIteration()

For more on the setState callback, see this documentation. Also, see this documentation for details on the overlap problem that setInterval based loops are sensitive to. Hope that helps!

If anyone wants to know, you really shouldn't be doing game code within react-native's state. Instead, write your game code outside of react-native. Example, react-native-canvas can graphically draw things without state!

Okay i think i've managed to make a frankenstein code from your guys's suggestions. Here it is.

  ponentDidUpdate() {
    setTimeout(() => {
      requestAnimationFrame(this.loop);
    }, 1000/60);
  }

  loop = () => {
    this.forceUpdate();
  }

I've noticed that the performance was actually better then all other methods i've tried. I think it's the setInterval/forceUpdate thats too heavy. Is there another method of re-rendering my app/game? Perhaps bypassing re-render functions?