Различное поведение setState в React 17 и React 18

Я исправлял ошибку в коде FE для приложения моей компании, которое все еще использует React 17, и я заметил разное поведение при установке состояния между React 17 и React 18 (без строгого режима).

Код:

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

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

  console.info('render', state);

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

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

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

Вывод консоли:

Реагировать 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

Реагировать 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 синхронно запускает повторный рендеринг, что объясняет, почему мы видели render {num} перед выводом на консоль after set state. Однако в React 18 мы могли видеть, что повторный рендеринг происходит после консоли before set stateafter set state, а это означает, что setState не запускает повторный рендеринг сразу.

Может кто-нибудь объяснить, что здесь происходит? Это из-за параллельного режима React 18? Есть ли что-нибудь, что нам следует изменить при переходе с React 17 на React 18 из-за этого изменения поведения?

Кодыпесочница:

• Реагировать 17
• Реакт 18