React.js events need 2 clicks to execute

Question

I am building the Game of Life by React.js and I get stuck in a uncomfortable situation: Every event which I set as onClick={ event } needs 2 clicks to execute.

Let me describe more: As you can see in my code below, I have 2 buttons (one button is to change the size of the board to 10 x 10, the other one is to change the speed of the interval).

Everything is fine, except that when I click on these two buttons, I need to double click to execute. On the first click, with React Developer Tool in Chrome, I can see that the states including width, height, speed are changed, but the state board still remains unchanged. Only after the second click, the board state is changed.

Anyone can explain why and show me how to fix? Thank you

Here is a part of my code

var GameBoard = React.createClass({
    getInitialState: function() {
        return {
             width: 10,
             height: 10,
             board: [],
             speed: 1000,
        };
    },

    // clear the board to the initial state
    clear: function(width, height) {
        this.setState({
            width: width,
            height: height,
        });
        this.setSize();
        clearInterval(this.game);
    },

     // set the size of the board
     setSize: function() {
        var board = [];
        for (var i = 0; i < this.state.height; ++i) {
            var line = [];
            for (var j = 0; j < this.state.width; ++j)
                line.push(0);
            board.push(line);
        }
        this.setState({
            board: board
        });
    },

    // start the game
    start: function() {
        this.game = setInterval(this.gameOfLife, this.state.speed);
    },

    gameOfLife: function() { // game of life },

    // change the speed of the game
    changeSpeed: function(speed) {
        this.setState({ speed: speed });
        clearInterval(this.game);
        this.start();
    },

    // change the size to 10 x 10
    smallSize: function() {
        this.clear(10, 10);
    },

    render: function() {
        return (
            <div className="game-board">
                <h1>Conway's Game of Life</h1>
                <h2>Generation: { this.state.generation }</h2>
                <div className="control">
                    <button className="btn btn-default" onClick={ this.start }>Start</button>

                </div>

                <Environment board={ this.state.board } onChangeSquare = { this.onChangeSquare }/>

                <div className="size">
                    <h2>Size</h2>
                    <button className="btn btn-default" onClick={ this.smallSize }>Small (10 x 10)</button>
                </div>

                <div className="speed">
                    <h2>Speed</h2>
                    <button className="btn btn-default" onClick={ this.changeSpeed.bind(this, 900) }>Slow</button>
                </div>
            </div>
        )
    }
});

Answer 1

The reason is that the state of a component does not change immediately.

In clear() method you set the width and height state. But internally when they react setSize() method they will not be updated immediately. They will be updated only when they reach the render method.

When you click the button the second time the states would have been updated properly. That is why it works in the second instance.

One solution please dont keep the width and height as state use it in props. Keep the 10 * 10 as a separete default prop and use it in the setSize method.