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

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();
}