Using this.setState in the callback of this.setState in React JS?

Question

Is it possible to call this.setState in the callback of this.setState?

I am making a Roguelike Dungeon and have a setup where in the callback of this.setState a helper function is used, that calls this.setState again. My game freezes at this point.

So I have an object in the React component that has a method to generate a random 2D array map:

this.Dungeon.Generate();

When the game starts, we call in componentDidMount() the following function in the component:

componentDidMount: function() {

    this.Dungeon.Generate();

    this.setState({
      board: this.Dungeon.map
    }, function() {

      this.generateGamePlay();

    });

  },

this.generateGamePlay() looks like this and basically generates and places the player, boss and items randomly on the board:

generateGamePlay: function() {

var board = this.state.board.slice();

var startPosition = this.randomPosition();

board[startPosition[0]][startPosition[1]] = this.state.player;

var bossPosition = this.randomPosition();

board[bossPosition[0]][bossPosition[1]] = this.state.boss[this.state.dungeonLevel];

this.generateWeapons(this.state.dungeonLevel,board);

this.generateFood(this.state.dungeonLevel, board);

this.generateEnemies(this.state.dungeonLevel, board);

this.setState({
  board: board
});

 },

But when a player dies, we call above again to reset the game:

this.Dungeon.Generate();
        //generate a new dungeon map, available in this.Dungeon.map

        this.setState({
          board: this.Dungeon.map, currentMessage: "Game restarted", player: player, weapon: weapon, dungeonLevel: 0
          }, function(){

                this.generateGamePlay();

          })

But then is when my game freezes. So the first time I call this.generateGamePlay() (which calls this.setState) it works but the second time it freezes. Anyone can help me?

Answer 1

I would look at the part where you are setting this.Dungeon.map in state.

this.setState({
          board: this.Dungeon.map, currentMessage: "Game restarted", player: player, weapon: weapon, dungeonLevel: 0
          }, function(){

                this.generateGamePlay();

          })

my guess is that something else may be changing the map object and not using setstate since it is a property of the Dungeon.

from the react docs

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

when you pass the map property to setstate it will keep a reference to this.Dungeon.map which if you then modify will cause issues. You should make a copy of what ever .map is and pass that to state.

You should also make one component in charge of the state instead of calling it multiple times in different functions. From the react docs

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

your freezing could be from race conditions in the render method due to all the multiple setstate calls.