Что выведется в консоли при первом рендере React-компонента с дочерним компонентом (useLayoutEffect, useEffect)?

При первом рендере React-компонента с дочерним компонентом, в котором используются хуки useLayoutEffect и useEffect, порядок вызовов будет следующим:

1. Сначала React отрисует DOM.
2. Затем выполнится callback из useLayoutEffect — он вызывается синхронно сразу после изменения DOM, но до того, как браузер отрисует изменения на экране.
3. После этого браузер обновит экран.
4. И только потом выполнится callback из useEffect — он вызывается асинхронно после того, как браузер отрисовал изменения.

Пример вывода в консоль:

function Child() {
  React.useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);

  React.useEffect(() => {
    console.log('useEffect');
  }, []);

  return <div>Child</div>;
}

function Parent() {
  return <Child />;
}

// При первом рендере в консоли будет:
// useLayoutEffect
// useEffect

Таким образом, useLayoutEffect срабатывает раньше useEffect при первом рендере.