Game of Life in React/Redux, help in increasing performance

Question

I am working on a version of The Game of Life in react/redux/javascript, whilst i have it working the performance is horrible.

Here is a link to the running game He

Answer 1

So in the end never got the performance to a satisfactory level using the DOM and html components. So i re-wrote the grid code to render all the cells using HTM5 Canvas and the performance is no longer an issue, in fact it now renders quite happily on the iPhone.

Answer 2

I think this could be the issue. By profiling we see:

You have bursts of work with a regular interval, each taking about 85ms which is very abnormal. Looking down the call-stack there is a triggerTimer and a subsequent startTimer function calls.

Looking at the source code for these: https://github.com/gazzer82/fcc-game-of-life/blob/a4a000a6cafa5877a4a15e59cec5184076905cc4/src/containers/lower_buttons.jsx#L12.

You need to return from startTimer in the condition. Otherwise triggerTimer and startTimer will call each other as fast as they can over and over again, spawning new timeouts each time.

Before

  startTimer(){
    var that = this;
    if(this.props.controls.game === 'running'){
      this.props.stepState();
    }
    setTimeout(() => this.triggerTimer(), this.props.controls.speed);
  }

  triggerTimer(){
    this.startTimer();
  }

After

startTimer(){
  var that = this;
  if(this.props.controls.game === 'running'){
    this.props.stepState();
    // Return here
    return;
  }
  setTimeout(() => this.triggerTimer(), this.props.controls.speed);
}

triggerTimer(){
  this.startTimer();
}