Background

• react 18.3
• chrome browser v127

Question

import { useEffect, useState } from 'react'

function App() {
  const [state, setState] = useState(0);
  console.log(1);


  queueMicrotask(() => {
    console.log('inside queueMicrotask - 1');
  });

  useEffect(() => {
    console.log(2);
  }, [state]);

  queueMicrotask(() => {
    console.log('inside queueMicrotask - 2');
  });
  
  Promise.resolve().then(() => {
    console.log(3);
  });

  setTimeout(() => {
    console.log(4);
  }, 0);

  const onClick = () => {
    console.log(5);
    setState((num) => num + 1);
    console.log(6);
  };

  return (
    <div>
      <button onClick={onClick} data-testid="action">
        click me
      </button>
    </div>
  );
}

export default App

The result is

1
2
inside queueMicrotask – 1
inside queueMicrotask – 2
3
4

I expected

1
inside queueMicrotask – 1
2
inside queueMicrotask – 2
3
4

How is it possible for the callback function of useEffect to be called before the callback of queueMicrotask?
I was under the impression that the microtask queue has a very high priority in the Event Loop.