useEffect blocking render in React18

Question

I was trying to demonstrate the difference between useEffect and useLayoutEffect, and I stumble upon something strange. Since React 18, effects seem to be blocking render when taking a long time, while in React 17 render was done (and screen painted) before the effect was triggered.

For example, if you have this in a component :

function MyComponent() {
  React.useEffect(() => {
    sleep(1000)
    console.log('effect done!')
  })

  return ...
}

// Sleep is a small util like this:
function sleep(time = 0) {
  const wakeUpTime = Date.now() + time;
  while (Date.now() < wakeUpTime) {}
}

In React 17, it would render the component and only then it would get "stuck" in this long useEffect. In React 18, it's actually blocking the render. Why ? Aren't effects supposed to be triggered asynchronously after render ?

I don't see the point of useLayoutEffect if the screen doesn't get painted before useEffect runs

I made two sandboxes to show the difference :

• With React 17 (working as expected) => https://codesandbox.io/s/useeffect-with-react-17-l8p0vd?file=/src/App.tsx:0-1249
• With React 18 (blocking render) => https://codesandbox.io/s/useeffect-with-react-18-o2qhtb?file=/src/App.tsx:87-192