¿Por qué llamar al método react setState no muta el estado inmediatamente?

Estoy leyendo la sección de formularios dereaccionardocumentación y acabo de probar este código para demostrar el onChangeuso ( JSBIN ).

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

Cuando actualizo el <input/>valor en el navegador, el segundo console.logdentro de la handleChangedevolución de llamada se imprime igual valueque el primero console.log. ¿Por qué no puedo ver el resultado this.setState({value: event.target.value})en el alcance de la handleChangedevolución de llamada?

De la documentación de React :

setState()no muta inmediatamente this.statepero crea una transición de estado pendiente. Acceder this.statedespués de llamar a este método puede potencialmente devolver el valor existente. No hay garantía de funcionamiento sincrónico de las llamadas setStatey las llamadas se pueden agrupar para aumentar el rendimiento.

Si desea que se ejecute una función después de que ocurra el cambio de estado, páselo como devolución de llamada.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Como se menciona en la documentación de React, no hay garantía de setStateser despedido sincrónicamente, por lo que console.logpuede devolver el estado antes de la actualización.

Michael Parker menciona pasar una devolución de llamada dentro del setState. Otra forma de manejar la lógica después del cambio de estado es a través del componentDidUpdatemétodo del ciclo de vida, que es el método recomendado en React docs.

En general, recomendamos usar componentDidUpdate () para dicha lógica.

Esto es particularmente útil cuando puede haber sucesivos setStatedisparos, y le gustaría activar la misma función después de cada cambio de estado. En lugar de agregar una devolución de llamada a cada uno setState, puede colocar la función dentro del componentDidUpdate, con lógica específica dentro si es necesario.

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Puede intentar usar ES7 async / await. Por ejemplo, usando su ejemplo:

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

Cuidado con los métodos de reacción del ciclo de vida！

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

Trabajé durante varias horas para descubrir que getDerivedStateFromPropsse llamará después de cada setState().

😂

async-await la sintaxis funciona perfectamente para algo como lo siguiente ...

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

En pocas palabras, this.setState ({data: value}) es de naturaleza asíncrona, lo que significa que sale de la Pila de llamadas y solo vuelve a la Pila de llamadas a menos que se resuelva.

Lea acerca de Event Loop para tener una idea clara de la naturaleza asincrónica en JS y por qué toma tiempo actualizarse.

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

Por lo tanto

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

ya que lleva tiempo actualizarlo. Para lograr el proceso anterior:

    this.setState({data:value},function () {
     console.log(this.state.data);
    });