> В каком порядке отрабатывают логи и рендер при использовании useEffect и useLayoutEffect с пустым массивом зависимостей в React (React)

При использовании useEffect с пустым массивом зависимостей ([]) порядок выполнения следующий:

1. Компонент рендерится (вызывается функция компонента, возвращается JSX).

2. React обновляет DOM.

3. Браузер отрисовывает изменения на экране (paint).

4. После этого асинхронно выполняется колбэк useEffect.

Лог в useEffect появится после того, как пользователь увидит обновленный интерфейс.

С useLayoutEffect с пустым массивом зависимостей порядок иной:

1. Компонент рендерится.

2. React обновляет DOM.

3. Синхронно выполняется колбэк useLayoutEffect (до того, как браузер отрисует изменения).

4. Браузер отрисовывает экран.

Лог в useLayoutEffect появится до того, как пользователь увидит обновление, так как он блокирует отрисовку.

Пример для наглядности:

JSX
function App() {
  useEffect(() => console.log('useEffect'));
  useLayoutEffect(() => console.log('useLayoutEffect'));
  console.log('render');
  return null;
}
// Вывод в консоль: "render" → "useLayoutEffect" → "useEffect"

Ключевое отличие: useLayoutEffect выполняется синхронно после всех DOM-мутаций, но до отрисовки браузером, а useEffect - асинхронно после отрисовки.