Як працює useLayoutEffect у React і чим він відрізняється від useEffect?

useLayoutEffect — це хук у React, схожий на useEffect, але з однією ключовою відмінністю: він виконується відразу після змін у DOM, але перед тим, як браузер застосує зміни та відобразить їх на екрані.

Як працює useLayoutEffect?

Синхронний ефект. На відміну від useEffect, який виконується асинхронно після рендерингу, useLayoutEffect виконується синхронно відразу після оновлення DOM React, але перед тим, як браузер відобразить зміни на екрані. Це може бути корисно, якщо вам потрібно виміряти DOM або виконати дії, які можуть вплинути на рендеринг.
Для роботи з DOM. Цей хук частіше використовується, коли потрібно щось зробити з DOM безпосередньо (наприклад, виміряти розміри елементів або застосувати стилі перед тим, як браузер відобразить оновлення).

Приклад використання useLayoutEffect

jsx

import { useState, useLayoutEffect, useRef } from "react";

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

  useLayoutEffect(() => {
    // Синхронно вимірюємо ширину елемента перед рендерингом
    if (divRef.current) {
      setWidth(divRef.current.getBoundingClientRect().width);
    }
  }, []); // Ефект спрацює лише один раз

  return (
    <div>
      <div ref={divRef} style={{ width: "100%" }}>
        <p>Ширина елемента: {width}px</p>
      </div>
    </div>
  );
}

Відмінності від useEffect

Час виконання:
useEffect виконується асинхронно після того, як браузер завершить рендеринг і відобразить зміни.
useLayoutEffect виконується синхронно відразу після змін у DOM, але перед тим, як браузер застосує зміни та відобразить їх.
Використання:
useEffect підходить для більшості побічних ефектів, таких як отримання даних або підписки.
useLayoutEffect використовується, коли потрібно синхронно працювати з DOM, наприклад, для вимірювань або змін, які повинні відбутися перед малюванням.
Продуктивність:
useEffect не блокує рендеринг, оскільки виконується після того, як браузер відобразить зміни.
useLayoutEffect може блокувати рендеринг, якщо виконує складні обчислення або операції, які потребують часу.

Важливо про useLayoutEffect:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Як працює useLayoutEffect у React і чим він відрізняється від useEffect?