React setState with async update option?

Question

Does anyone know if React can use the async updater parameter in setState(updater)? I have the following code that does not work (called f, but the user interface is not updated):

this.setState( async (prevState) => ({
   foo: await f(prevState.someData)
}))      

Apparently, the parameter asyncis a problem. I had to use this ugly alternate version:

this.setState( async (prevState) => {
   this.setState({
      foo: await f(prevState.someData)
   })      
})

Is there a better way to write the above code?

Answer 1

Then you can setStatetwice.

this.setState((prevState) => {
    f(prevState.someData);        

    // Don't change state now.
    return {}; 
})

async f(someData) {
  this.setState(prevState) {
    // Do something
  }
} 

Answer 2

I assume that you are calling setState for the method. So why not put async on the method?

async handleSomething () {
  //.. some logic

  this.setState(prevState => ({
    foo: await f(prevState.someData)
  }))
}

Run code

Answer 3

You cannot use async inside setState, as setState should be a pure function without side effects. Just execute the async method before calling setState:

async classMethod = () => {
    let response = await someAsyncOperation(this.state.someData);
    this.setState({ someData: response });
}