Game of Life in React / Redux Helps Improve Productivity

Question

I am working on a version of The Game of Life in the reaction / redux / javascript, while it works for me, the performance is terrible.

Here is the link to the current game. Here is the source of githhub

At the moment, I am on every tick (250 500 750 ms, user-modifiable), updating the state of each cell. To do this, I iterate over an array of objects representing each cell. Inside each object there is a parameter called status, which can be an integer of 1 for living or 0 for dead.

Then I draw three rows of three cells for the above middle and lower rows around the cell in question, then sum these values ​​(excluding the cell itself in the center).

Then I run this number through the if / then stream to determine the new state of this cell.

This process is then repeated for each individual cell in the application. After that, the new state of each cell is sent using abbreviations and component updates as necessary.

In actual view, each cell is a reaction component that takes it as a support from a container that is a grid. I have the shoulComponentRender () setting only to re-render the cell when its life status changes.

I think that when profiling the application (which I am not very clear / good), it is the process of calculating all the values ​​that slow down, but I can be wrong, and these may be the React components that cause the problem.

Any help / help appreciated!

Answer 1

Thus, in the end, performance did not reach a satisfactory level using the DOM and html components. So I rewrote the grid code to render all cells using the HTM5 Canvas, and performance is no longer a problem, in fact, it now reflects pretty well on the iPhone.

Answer 2

I think this may be a problem. By profiling we see:

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

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

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

Front

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