Problem with setInterval freezing browser in React Game of Life

Problem with setInterval freezing browser in React Game of Life
0.0 0

#1

Ok, I really hope someone has an idea about why this is happening. As soon as the setInterval timing has elapsed (2000ms) my browser freezes. I am really hoping this isn’t a bad omen of my code bogging it down. Here is where the setInterval is called:

play(){
		if (this.state.playBtn == "Start") {
			this.intervalId = setInterval(this.fullBoardNeighborCheck.bind(this), 2000);
			this.setState({playBtn : "Pause"})
		} else {
			clearInterval(this.intervalId);
			this.setState({playBtn : "Start"});
			
		}
	}

Here is the link to the whole project - https://codepen.io/escottalexander/pen/oZRVLe?editors=0010
Of course, use caution if you press the start button. You can press the generation counter to see the function do one update. It doesn’t seem to lag at all when you do that so I am really hopeful I just have setInterval setup wrong.

Initially I had set it up where it would call “fullBoardNeighborCheck” and it was only iterating once even though I was using setInterval. I have changed it to its current setting but I don’t know what I am missing.

Thanks for the help!


Help with Game of Life death/life logic
#2

Hello there!

I had a quick look and haven’t followed the code all the way through; however, there a few things that I spotted and may be helpful as a starting point:

  • I don’t think you are supposed to set a state to setInterval as in the code block below. I’m not entirely sure what setting the state like this would do; console.log() of it seems to suggest that 1 is returned once, but I’m not sure what else it would do. Do note that that this.state.timer is not the same as this.timer, which seems to be how you intended to set the timer to begin with:
  this.setState({
    playBtn: "Pause",
    timer: setInterval(this.fullBoardNeighborCheck, 1000)
  });
  • I couldn’t reproduce the problem you described, but play() is not actually bound to this of the component. As such, clicking on the play button actually doesn’t trigger this.fullBoardNeighborCheck
  • You may want to review the syntax of the arrow function (MDN Documentation, there is an example for setInterval(), too). I also found this part of the React Documentation relevant to the Game of Life project
  • In your onClick function calls, you can simply do onClick={this.play}
  • For testing purposes, you should probably reduce the size of the board. I noticed that the board size and the related logic seems to be hard-coded with a size of 100—consider using a variable to specify the board size in the future so you can easily change things for testing/if you change your mind. Doing so also makes your code much more reusable (for example, you may end up reusing some of your Game of Life code for the Rougelike project)
  • I don’t know if it’s acceptable to create the entire board in constructor(), something about it doesn’t look right but I don’t know enough to say what it is (maybe I’m just wrong, too)
  • I like the background and how it changes with scrolling

There is probably a lot of rewriting required, but hang in there and good luck. :slight_smile:


#3

Thanks for the advice. I will work on it some more.