Q:

Accessing recently set property in state returns the old value

This is my model:
class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      squares: Array(3).fill(Array(3).fill(null)),
      xIsNext: true
    };
  }

  get turn() {
    return this.state.xIsNext ? 'X' : 'O';
  }

  handleTurn(x, y) {
    const squares = this.state.squares.slice().map(function(row) {
      return row.slice();
    });

    const turn = this.turn; // this returns either "X" or "Y"
    squares[x][y] = turn; // this is the value I'm going to be accessing later on
    this.setState({
      squares: squares
    });

    if (this.isSolved(x, y)) {
      console.log('VICTORY!')
    }
    this.nextPlayer();
  }
  isSolved(x, y) {
    var count = 0
    var player = this.state.squares[x][y]; // here is when I try to access the value set at at 'handleTurn')
    // more stuff down there
    return false;
}

My problem is this: isSolved is called from handleTurn, and in handleTurn I'll set up one of the coordinates from the bi-dimensional to either 'X' or 'Y'; but when I check that value in isSolved, I always get the previous value, not the one I just set.
E.g., on first call will get null (when I'd expect  X), second call and I'll get X (when I'd expect O by then), etc.

A:

In React setState works (mostly) asynchronously in order to be able to batch multiple changes in one pass.
That means, that when you this.setState in handleTurn the state has not actually been changed yet.
You can pass setState a second argument, which is a callback function you want to execute when the state is actually changed.
Here is an interesting article which goes into more depth on the behaviour of setState: https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm

