Senior

Millal aktiveerub useLayoutEffect ja milleks see on vajalik?

sobes.tech AI

Vastus AI-lt

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

Основное отличие от useEffect в том, что useEffect запускается асинхронно после отрисовки, а useLayoutEffect — синхронно, блокируя отрисовку до завершения эффекта.

Пример использования:

import React, { useLayoutEffect, useRef, useState } from 'react';

function Component() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    if (ref.current) {
      setWidth(ref.current.offsetWidth);
    }
  }, []);

  return <div ref={ref}>Ширина: {width}px</div>;
}

Здесь useLayoutEffect гарантирует, что измерение ширины произойдёт до отрисовки, предотвращая мерцание.

Eelmine Edasi