¿Qué sucede cuando se usa this.setState varias veces en el componente React?

Quería verificar qué sucede cuando usa this.setState varias veces (2 veces por el bien de la discusión). Pensé que el componente se procesará dos veces, pero aparentemente solo se procesará una vez. Otra expectativa que tenía era que tal vez la segunda llamada para setState se ejecutará sobre la primera, pero lo adivinó, funcionó bien.

Enlace a un JSfiddle

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Como verá, una alerta que dice "render" aparece en cada render.

¿Tiene una explicación de por qué funcionó correctamente?

Reaccionar lotes de actualizaciones de estado que ocurren en controladores de eventos y métodos de ciclo de vida. Por lo tanto, si actualiza el estado varias veces en un <div onClick />controlador, React esperará a que finalice el manejo de eventos antes de volver a renderizar.

Para ser claros, esto solo funciona en manejadores de eventos sintéticos controlados por React y métodos de ciclo de vida. Las actualizaciones de estado no se almacenan por lotes en AJAX ni en los setTimeoutcontroladores de eventos, por ejemplo.

El método setState () no actualiza inmediatamente el estado del componente, simplemente coloca la actualización en una cola para ser procesada más tarde. React puede agrupar varias solicitudes de actualización juntas para hacer que la renderización sea más eficiente. Debido a esto, se deben tomar precauciones especiales cuando intente actualizar el estado en función del estado anterior del componente.

Por ejemplo, el siguiente código solo incrementará el atributo de valor de estado en 1 aunque se haya llamado 4 veces:

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

Para usar un estado después de que se haya actualizado, realice toda la lógica en el argumento de devolución de llamada:

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

El método setState (actualizador, [devolución de llamada]) puede tomar una función de actualización como su primer argumento para actualizar el estado en función del estado y las propiedades anteriores. El valor de retorno de la función de actualización se fusionará superficialmente con el estado del componente anterior. El método actualiza el estado de forma asincrónica, por lo que hay una opción de devolución de llamada que se llamará una vez que el estado haya terminado de actualizarse por completo.

Ejemplo:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

A continuación, se muestra un ejemplo de cómo actualizar el estado en función del estado anterior:

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }