Javascript React 17与React 18中的不同setState行为

我正在修复我公司的应用程序的FE代码，该应用程序仍然使用React 17，我注意到设置React 17和React 18之间的状态时有不同的行为(没有严格模式).

代码:

import React, { useEffect, useState } from 'react';

export default function App(props) {
  const [state, setState] = useState(0);

  console.log('render', state);

  useEffect(() => {
    (async () => {
      for (let i = 0; i < 3; i++) {
        await new Promise((res) => {
          setTimeout(res, 500);
        })

        console.log('before set state');
        setState(val => val + 1);
        console.log('after set state');
      }
    })();
  }, []);

  return (
    <h1>{state}</h1>
  );
}

控制台输出:

React 17

render 0
before set state
render 1
after set state
before set state
render 2
after set state
before set state
render 3
after set state

React 18

render 0
before set state
after set state
render 1
before set state
after set state
render 2
before set state
after set state
render 3

似乎在React 17中，setState同步触发了重新渲染，这解释了为什么我们在控制台输出after set state之前看到render {num}.然而，在React 18中，我们可以看到重新呈现发生在控制台before set state和after set state之后，这意味着setState没有立即触发重新呈现.

有人能解释一下这里发生了什么吗？这是因为React 18的并发模式吗？当我们从React 17迁移到React 18时，由于这种行为的改变，我们需要做什么调整？

Codesandbox:

• React 17
• React 18