> Каков порядок вывода в консоль в React-компоненте? (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: КИТМЕД

Стек: React

> Пример ответа

Порядок вывода в консоль в React-компоненте зависит от фазы жизненного цикла и используемых хуков. Рассмотрим на примере функционального компонента с хуками useState, useEffect и useLayoutEffect:

JSX
function Example() {
  console.log('1. render (тело компонента)');

  useEffect(() => {
    console.log('3. useEffect (после отрисовки)');
  });

  useLayoutEffect(() => {
    console.log('2. useLayoutEffect (синхронно после DOM)');
  });

  return <div>Пример</div>;
}

При первом рендере консоль покажет:

render (тело компонента) - выполняется при каждом рендере, включая начальный.
useLayoutEffect (синхронно после DOM) - запускается сразу после обновления DOM, но до того, как браузер отобразит изменения на экране.
useEffect (после отрисовки) - выполняется асинхронно, после того как браузер завершит отрисовку.

При обновлении состояния (например, через setState) порядок сохраняется: сначала рендер, затем useLayoutEffect, потом useEffect. Для классовых компонентов аналогично: render, componentDidMount (или componentDidUpdate), но useLayoutEffect соответствует componentDidMount/componentDidUpdate по времени выполнения (синхронно), а useEffect - отложенно.