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