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 Here's the source on githhub

At the moment, i am at every tick (250,500,750ms changeable by the user) updating the state of each cell. For that i am looping through an array of objects that represent each cell. Within each object is a parameter called status which can be an integer on 1 for alive or 0 for dead.

I am then pulling in three rows of three cells, for the above middle and bottom rows around the cell in question, i then sum those values (excluding the cell itself in the centre).

I then run that number through an if/then flow to decide the new state of that cell.

This process then repeats for every single cell in the application. Once it's done the new state of each cell is dispatched using redux and the components update as needed.

In the actual view, each cell is a react component that receives it's state as a prop from the container which is the grid. I have setup shoulComponentRender() to only re-render the cell when it's life status changes.

I think from profiling the app (which i'm not very clear/good at) that it is the process of calculating all the values that is slowing things down, but i could be wrong and it could be the React components that are causing the issue.

Any help/assistance appreciated!

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