Bug: setState re-renders the component synchronously when called in a promise

[KarelHrkal]

React version: 16.13.1

Steps To Reproduce

1. Call setState in an asynchronous function after await, or in a .then() function on a promise.

Link to code example: https://codesandbox.io/s/friendly-ganguly-gsl6c?file=/src/App.js

Code example

const SynchronousRerender: FunctionComponent = () => {
  const [value, setValue] = useState(0);
  console.log('I am rendering with value = ', value);

  useEffect(() => {
    Promise.resolve().then(() => {
      console.log('Use effect 1');
      setValue(1);
      console.log('Use effect 2');
      setValue(2);
      console.log('Use effect 3');
      setValue(3);
      console.log('Use effect done');
    });
  }, []);

  return <>{value}</>;
};

The current behavior

Calling setState will synchronously re-rendener the component - the component function will be called with the new state before setState even returns. The code example prints:

I am rendering with value =  0
Use effect 1
I am rendering with value =  1
Use effect 2
I am rendering with value =  2
Use effect 3
I am rendering with value =  3
Use effect done

The expected behavior

The new state should be queued for an update and then processed afterwards, preferably the same way as if it wasn't in a .then() promise function: all the state changes get evaluated, and then the component is re-rendered only once. The code example should print:

I am rendering with value =  0
Use effect 1
Use effect 2
Use effect 3
Use effect done
I am rendering with value =  3

[eps1lon]

Thanks for the report.

A similar issue was reported in #20991. #20991 (comment) hopefully gives a good entrypoint to understand that the reported behavior is expected.