В каком порядке выполняются render, useLayoutEffect и useEffect?

Question

Сначала React выполняет render, затем на этапе коммита вызывается useLayoutEffect, и только после отрисовки браузером вызывается useEffect. useLayoutEffect выполняется синхронно и блокирует отрисовку, а useEffect — асинхронно, после paint. Поэтому useLayoutEffect используют для работы с layout, а useEffect — для побочных эффектов, не влияющих на разметку.

YeaHub · Accepted Answer

React разделяет обновление UI на несколько фаз, и хуки привязаны к этим фазам.ОпределениеRender — вычисление JSX и виртуального дерева.Commit phase — применение изменений к DOM.Paint — отрисовка браузером.Порядок выполненияrenderВызывается функция компонента.Рассчитывается JSX.DOM ещё не обновлён.Commit phaseОбновляется реальный DOM.Вызывается useLayoutEffect.PaintБраузер рисует обновлённый UI.useEffectВыполняется после отрисовки.Визуальноrender → DOM update → useLayoutEffect → paint → useEffect
useLayoutEffectuseLayoutEffect(() => {
  // измерение размеров DOM
}, []);
ОсобенностиВыполняется синхронно.Блокирует отрисовку.Подходит для измерений и синхронных изменений DOM.useEffectuseEffect(() => {
  // запросы, подписки, логика
}, []);
ОсобенностиНе блокирует отрисовку.Выполняется после paint.Предпочтителен в большинстве случаев.ВыводuseLayoutEffect нужен, когда важно вмешаться до отрисовки, а useEffect — когда эффект не влияет на layout.