Senior

Quand useLayoutEffect se déclenche-t-il et à quoi sert-il?

sobes.tech IA

Réponse de l'IA

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 гарантирует, что измерение ширины произойдёт до отрисовки, предотвращая мерцание.

Précédent Suivant