Por que chamar o método react setState não altera o estado imediatamente?

Estou lendo a seção Formulários dereactjsdocumentação e apenas tentei esse código para demonstrar o 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')
);

Quando atualizo o <input/>valor no navegador, o segundo console.logdentro do handleChangeretorno de chamada é impresso da mesma valueforma que o primeiro console.log: Por que não consigo ver o resultado this.setState({value: event.target.value})no escopo do handleChangeretorno de chamada?

Da documentação do React :

setState()não muda imediatamente, this.statemas cria uma transição de estado pendente. O acesso this.stateapós a chamada desse método pode potencialmente retornar o valor existente. Não há garantia de operação síncrona de chamadas setStatee as chamadas podem ser agrupadas para obter ganhos de desempenho.

Se você deseja que uma função seja executada após a alteração do estado, passe-a como um retorno de chamada.

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

Conforme mencionado na documentação do React, não há garantia de setStateser acionado de forma síncrona; portanto, você console.logpode retornar o estado antes da atualização.

Michael Parker menciona passar um retorno de chamada dentro do setState. Outra maneira de lidar com a lógica após a mudança de estado é através do componentDidUpdatemétodo do ciclo de vida, que é o método recomendado nos documentos do React.

Geralmente, recomendamos o uso de componentDidUpdate () para essa lógica.

Isso é particularmente útil quando pode haver setStatedisparos sucessivos e você deseja disparar a mesma função após cada alteração de estado. Em vez de adicionar um retorno de chamada a cada um setState, você pode colocar a função dentro do componentDidUpdate, com lógica específica dentro, se necessário.

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

Você pode tentar usar o ES7 assíncrono / aguardar. Por exemplo, usando o seu exemplo:

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

Cuidado com os métodos do ciclo de vida de reação！

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

Eu trabalhei por várias horas para descobrir que getDerivedStateFromPropsserá chamado depois de cada vez setState().

😂

async-await sintaxe funciona perfeitamente para algo como o seguinte ...

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}`);
}

Basta colocar - this.setState ({data: value}) é de natureza assíncrona, o que significa que sai da Pilha de Chamadas e volta para a Pilha de Chamadas, a menos que seja resolvido.

Leia sobre o Event Loop para ter uma ideia clara da natureza assíncrona em JS e por que demora para atualizar -

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

Conseqüentemente -

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

pois leva tempo para atualizar. Para alcançar o processo acima -

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