useLayoutEffect для измерений перед анимацией

Иногда при первой отрисовке элемент заметно смещается или мерцает, прежде чем занять нужное положение. Обычно это происходит, когда Вы измеряете или перемещаете элемент после того, как браузер уже отрисовал его.

В течение одного кадра пользователь видит неправильное положение, а затем внезапную коррекцию, из-за чего интерфейс выглядит неисправным.

useEffect выполняется после отрисовки браузером. Поэтому, если Вы считываете размеры и обновляете DOM внутри useEffect, пользователь уже успевает увидеть нескорректированный кадр до применения изменения.

Для визуального позиционирования, которое должно быть незаметным для пользователя, выполнение после отрисовки происходит слишком поздно.

useLayoutEffect синхронно выполняется после того, как React изменит DOM, но до отрисовки браузером. Любое чтение или изменение DOM, выполненное там, применяется до того, как пользователь увидит хотя бы один кадр.

Поэтому этот инструмент подходит для измерений и позиционирования, которые с самого начала должны выглядеть правильно.

Внутри useLayoutEffect можно получить геометрию элемента с помощью ref.current.getBoundingClientRect(), чтобы зафиксировать его положение и размер перед началом анимации.

Поскольку это выполняется до отрисовки, Вы можете одновременно измерить элемент и применить к нему исходное преобразование без видимого мерцания.

FLIP расшифровывается как First, Last, Invert, Play — исходное положение, конечное положение, инверсия и воспроизведение. Сначала Вы фиксируете исходное положение элемента, позволяете ему переместиться в конечное, затем выполняете инверсию, применяя преобразование, которое визуально возвращает его в исходное положение, и наконец запускаете анимацию, убирая это преобразование, чтобы элемент переместился в конечное положение.

Так изменения разметки можно анимировать с помощью одного лишь недорогого transform, даже если настоящая разметка изменилась мгновенно.

Ключевые измерения выполняются в useLayoutEffect: сохраните геометрию исходного положения до изменения и конечного положения после него, затем вычислите разницу. Выполнение до отрисовки гарантирует, что инвертирующее преобразование будет применено до того, как что-либо появится на экране.

Разница между двумя прямоугольниками даёт точные значения смещения и масштаба для инверсии.

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

Поскольку инверсия применяется до отрисовки, пользователь никогда не видит элемент в его исходном конечном положении.

На сервере нет DOM, поэтому React записывает в журнал предупреждение о том, что useLayoutEffect ничего не делает во время серверной отрисовки. Эффекты, связанные с разметкой, имеют смысл только в браузере.

Это предупреждение показывает, что эффект не может выполняться там, где нечего измерять.

Если компонент должен выполняться на сервере, используйте useEffect вместе с requestAnimationFrame, чтобы выполнить измерение до следующей отрисовки, либо условно применяйте useLayoutEffect только в браузере.

Так Вы избежите предупреждения и всё же получите для некритичных анимаций время выполнения, близкое к моменту перед отрисовкой.

Анимация высоты — классический случай: измерьте высоту в свернутом и развернутом состояниях в useLayoutEffect, а затем анимируйте переход между явными значениями в пикселях, чтобы переход был плавным.

Поскольку высота auto не поддерживает анимацию, предварительное измерение реальной высоты позволяет перейти к конкретному числовому значению.

В большинстве случаев по умолчанию используйте useEffect. Применяйте useLayoutEffect только тогда, когда Вы считываете размеры и должны изменить DOM до отрисовки, чтобы избежать видимого мерцания.

Чрезмерное использование этого инструмента может ухудшить производительность, поскольку он блокирует отрисовку до завершения.

Проверьте, насколько хорошо Вы понимаете момент выполнения эффектов.

Вы узнали, что проблема мерцания возникает из-за измерения после отрисовки, что useLayoutEffect выполняется до отрисовки и как техника FLIP анимирует изменения разметки с помощью малозатратных преобразований.

Вы также увидели предупреждение SSR и резервный вариант с использованием useEffect и requestAnimationFrame.