Bug: State updates are being reordered across await in an effect

[ChrisBoostwords]

Summary

Steps To Reproduce :

useEffect(() => {
    (async () => {
        setStateA("foo");
        await someAsyncFunctionThatReturnsImmediately();
        setStateA("bar");
    })();
});

The current behavior :

In React, the second state update ("bar") is rendered first, followed by the first update ("foo"). This reordering occurs only when the awaited function returns immediately. If the awaited promise resolves later, the state updates in the expected order.

In the example, you can observe this by clicking the button and checking the console for the message "BUG RENDERED!!!shockshockshock", or by noticing a brief red flash on the component when it renders incorrectly. The console message appears every time, while the red flash happens occasionally. In our actual app, the incorrect render occurs consistently.

If you modify the example to call await optionalDelay(true), the state updates will be applied in order, and the component will flash green.