I suggest it should be mentioned as caveat/pitfall that if you call await inside an event handler,
all changes made to states before that await will then be flushed and trigger a rerender immediately, not waiting
for the event handler to finish completely.
Summary
The documentation says here: "React waits until all code in the event handlers has run before processing your state updates"
This not the case when using
await
inside the handler!Example
This will rerender the component twice!
Page
https://react.dev/learn/queueing-a-series-of-state-updates
Details
I suggest it should be mentioned as caveat/pitfall that if you call
await
inside an event handler, all changes made to states before thatawait
will then be flushed and trigger a rerender immediately, not waiting for the event handler to finish completely.