Измерение элементов DOM с помощью useLayoutEffect

element.getBoundingClientRect() возвращает объект DOMRect с размером и положением элемента относительно области просмотра: top, right, bottom, left, width и height. Для возврата точных значений браузер выполняет расчёт компоновки, поэтому вызывайте этот метод экономно.

Если прочитать getBoundingClientRect() в useEffect, браузер уже выполнил отрисовку. Если затем установить состояние на основе измерения, React повторно отрендерит компонент, и браузер снова выполнит отрисовку. Пользователь может ненадолго увидеть элемент в неправильном положении или с неправильным размером, прежде чем исправление появится во время второй отрисовки.

Чтение измерений в useLayoutEffect происходит после изменений DOM, но до отрисовки. Любое обновление состояния, вызванное измерением, заставляет React синхронно повторно отрендерить компонент и зафиксировать исправленный DOM — всё это до того, как браузер что-либо отрисует. Пользователь видит только окончательный правильный результат за один цикл отрисовки.

Всплывающая подсказка должна появляться рядом с элементом, который её вызывает. Измерьте положение этого элемента в useLayoutEffect с помощью getBoundingClientRect(), вычислите абсолютное положение подсказки и сохраните его в состоянии. Подсказка отобразится в правильном месте уже при первой отрисовке, без заметного скачка из неправильного исходного положения.

Чтобы анимировать переход элемента от его естественного, неограниченного размера к фиксированному, необходимо узнать естественный размер до применения ограничения. Прочитайте высоту элемента в useLayoutEffect до применения стиля анимации, сохраните её в состоянии, а затем используйте как начальное значение ключевого кадра для перехода CSS.

Если на странице есть закреплённая шапка, содержимому страницы нужен верхний внутренний отступ, равный высоте шапки, чтобы оно не оказалось скрытым за ней. Измерьте высоту шапки в useLayoutEffect с помощью ссылки на элемент: headerRef.current.getBoundingClientRect().height. Установите это значение как paddingTop контейнера содержимого. Компоновка будет правильной уже при первом рендеринге.

Когда вы вызываете setState внутри useLayoutEffect, React немедленно запускает ещё один цикл рендеринга и фиксации в том же синхронном блоке. Этот повторный рендеринг также запускает его useLayoutEffect. Будьте осторожны и не создайте бесконечный цикл: обновляйте состояние только в том случае, если новое измерение отличается от текущего значения состояния.

На сервере элементы DOM не существуют, поэтому getBoundingClientRect() вызовет исключение или вернёт нулевые значения. Защитите свой useLayoutEffect проверкой: if (typeof window === 'undefined') return;. В приложениях с SSR может потребоваться выполнить гидратацию с размером-заполнителем, а затем измерить элемент после гидратации на клиенте.

Однократное измерение с помощью useLayoutEffect даёт размер на момент монтирования. Для отслеживания изменений размера при изменении размера окна, динамическом содержимом или изменениях CSS используйте вместо этого ResizeObserver. Он вызывает обратный вызов при каждом изменении размера элемента, поэтому лучше подходит для адаптивных компонентов.

Если нескольким эффектам нужно одно и то же измерение, вычислите его один раз и передайте через контекст или свойства. Вычисление одного и того же значения getBoundingClientRect() в нескольких вызовах useLayoutEffect приводит к нескольким синхронным чтениям компоновки, каждое из которых относительно затратно. По возможности объединяйте измерения.

Ссылки заполняются до запуска эффектов. Когда срабатывает useLayoutEffect, гарантируется, что ref.current указывает на элемент DOM. Именно поэтому работает следующий шаблон: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). Внутри эффекта компоновки у смонтированного компонента ссылка никогда не бывает пустой.

Почему лучше вызывать getBoundingClientRect() в useLayoutEffect, а не в useEffect?

Используйте getBoundingClientRect() в useLayoutEffect, чтобы считывать измерения DOM после изменений, но до отрисовки. Обновления состояния на основе этих измерений вызывают синхронный повторный рендеринг, включённый в ту же отрисовку, и предотвращают мерцание. Для SSR установите защиту с помощью проверки typeof window. Для непрерывного отслеживания размера отдавайте предпочтение ResizeObserver.