state is immediately available when setState is called after await
When you make a function async and you await some expression, the following statements will be run after the awaited promise has been resolved under the hood.
The documentation states that setState() does not always immediately update the component, and it usually doesn't, but in this case when you update the state after a promise has been resolved in an event handler the state is updated immediately.
Example
class App extends React.Component { state = { value: 0 }; asyncClick = () => { Promise.resolve().then(() => { this.setState({ value: 5 }); console.log(this.state.value); }); }; syncClick = () => { this.setState({ value: 5 }); console.log(this.state.value); }; render() { return ( <div> <div>{this.state.value}</div> <button onClick={this.asyncClick}>Async click</button> <button onClick={this.syncClick}>Sync click</button> </div> ); }}ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="root"></div>