Explain the order of console logs when the Parent component is rendered in this React code, focusing on the behavior of useEffect and useLayoutEffect hooks in both Parent and Child components.

При первом рендере 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 при первом рендере.