React async execution order microtasks promises

Hard

In a React application, you're debugging a complex asynchronous operation where multiple events are being handled. What will be logged to the console in the following code?

ReactEvent loopAsyncPromisesMicrotasksSettimeout+1

1console.log('Start');
2
3setTimeout(() => {
4  console.log('Timeout 1');
5  Promise.resolve().then(() => console.log('Promise inside Timeout'));
6}, 0);
7
8Promise.resolve()
9  .then(() => {
10    console.log('Promise 1');
11    setTimeout(() => {
12      console.log('Timeout 2');
13    }, 0);
14  })
15  .then(() => console.log('Promise 2'));
16
17queueMicrotask(() => {
18  console.log('Microtask');
19});
20
21console.log('End');

In a React application, you're debugging a complex asynchronous operation where multiple events are being handled. What will be logged to the console in the following code?

Hint