Is it correct to use await setState()?

Question

my function looks like this:

this.setState(prevState => ({
 time : prevState.time + 1
}), function() {
 doSomethingWithNewState(this.state.time)
})

is it correct to use await in this situation? like this:

await this.setState(prevState => ({
 time : prevState.time + 1
}));
doSomethingWithNewState(this.state.time);

Solution 1

No this.setState doesn't return a promise.

So you can't use await in this case. You need to use the callback.

Solution 2

You can't await this.setState for the reasons already stated. But you can write your own awaitable setState function easily:

promisedSetState = (newState) => new Promise(resolve => this.setState(newState, resolve));

now you can call

await promisedSetState({ someState: true });

Solution 3

As the previous answer mentioned, setState() does not return a Promise, so you cannot use it with await as you intend. (Although you can await synchronous code as well).

When it's said that setState() is asynchronous, what's meant is that the effect of setState() may happen at a later time.

Furthermore, while reading this.state in the callback function will give you the state of the component at that particular moment in time when the callback gets executed, it's not exactly what you'd expect, because all callback functions are called after a batch of setState() calls gets executed. (See this issue).

Comments

[kumar k]

No. It's not right way to use await in front of setstate function. If you want do async operation, don it in separate thread and using the callback function update the setstate function.

[anshu purohit]

stackoverflow.com/questions/47019199/…

[J.Ko]

according to MDN, await expression can be used for "a Promise or any value to wait for. " developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[Anas]

await doesn't work with a callback. You can test it.

[J.Ko]

according to MDN, await expression can be used for "a Promise or any value to wait for. " developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[user2161301]

Yep, that's what I meant in the first sentence of my answer :-)

[Dhaval Patel]

@Anas await is working fine please check here next.plnkr.co/edit/…

[DillonHarless]

Don't know how this doesn't have more upvotes. Is this not advised or something? Working perfectly for me.

[David Schumann]

Because callbacks are ugly

[famfamfam]

any hook solution?

[Danial Ahmed]

@famfamfam try useEffect hook. stackoverflow.com/questions/56247433/…