Vários setStates não se acumulam em uma atualização / renderização ...?

Lembro-me de como fiquei surpreso quando descobri quesetState era assíncrono. Agora me deparei com um comportamento "estranho" que não se encaixa na minha compreensão desetState assincronicidade.

Considere um trecho abaixo (por algum motivo, isso resulta emScript Error, aqui está a caixa de proteção externa:https://codesandbox.io/s/zwrvkz74y3):

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      prop1: 1,
      prop2: 2
    };

    setTimeout(this.changeProp1.bind(this), 100);
  }

  componentDidUpdate() {
    console.info("componentDidUpdate called");
  }

  changeProp1() {
    this.setState({ prop1: 2 });
    this.changeProp2();
  }

  changeProp2() {
    this.setState({ prop2: 3 });
  }

  render() {
    const { prop1, prop2 } = this.state;
    return React.createElement('div', null, `prop1: ${prop1}, prop2: ${prop2}`);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(SomeComponent), rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Se você executar isso e verificar o console, verá quecomponentDidUpdate foi invocado duas vezes, mas osetStates acumular e atualizar o componente apenas uma vez?

ATUALIZAR: Eu acho que minha confusão vem dessa frase noAtualizações de estado podem ser assíncronas seção no site do ReactJS:

A reação pode agrupar várias chamadas setState () em uma única atualização para desempenho.