Как useLayoutEffect влияет на отображение UI

Question

useLayoutEffect выполняется синхронно после изменения DOM, но до отображения UI пользователю. Это позволяет читать размеры элементов и сразу вносить изменения без визуального мерцания. В отличие от useEffect, он блокирует отрисовку. Использовать его нужно осторожно. Обычно он нужен для работы с layout и измерениями.

YeaHub · Accepted Answer

useLayoutEffect предназначен для ситуаций, когда важно повлиять на DOM до того, как браузер отрисует кадр.Как работает useLayoutEffectЖизненный цикл выглядит следующим образом:React обновляет DOMвыполняется useLayoutEffectбраузер рисует экранЗа счёт этого пользователь не видит промежуточных состояний интерфейса.В каких случаях он нуженИзмерение размеров элементовgetBoundingClientRectвычисление позицийСинхронные правки layoutкорректировка скроллаустранение скачков интерфейсаПример:useLayoutEffect(() => {
  const height = ref.current.offsetHeight
  // использование размера до отрисовки
}, [])
Отличие от useEffectuseEffect не блокирует рендерuseLayoutEffect выполняется синхроннонеправильное использование может ухудшить производительностьКогда не стоит использоватьдля запросов к APIдля логики, не связанной с DOMпо умолчанию, «на всякий случай»ВыводuseLayoutEffect нужен для точечного контроля отображения UI. Его используют только тогда, когда useEffect приводит к визуальным артефактам.