Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить useLayoutEffect?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `useLayoutEffect()`

Хук `useLayoutEffect()` дозволяє виконувати **побічні ефекти**
одразу **після того, як React змінив DOM**,
але **до того, як браузер "показав" ці зміни користувачу**.

> Простіше кажучи:
> `useLayoutEffect` виконується **між фазою "рендер" і фазою "відмальовування"**.
> Це дає тобі шанс *"зловити DOM"* і зробити з ним щось до того,
> як користувач побачить результат.

---

## Синтаксис

```javascript
useLayoutEffect(() => {
  // код, який працює з DOM
  return () => {
    // очищення (cleanup)
  };
}, [dependencies]);
```

---

## Різниця між `useEffect` і `useLayoutEffect`

| Властивість | `useEffect` | `useLayoutEffect` |
|---|---|---|
| Коли виконується | **Після** відмальовування браузером | **До** відмальовування |
| Чи блокує рендер | Ні | Так (виконується синхронно) |
| Чи можна читати/вимірювати DOM | Так, але вже після показу користувачу | Так, *до* показу (точніші вимірювання) |
| Типові задачі | Запити, підписки, логіка, що не впливає на розмітку | Вимірювання і синхронізація DOM, позиціонування, анімації |
| Частота використання | Дуже часто | Рідко (лише за потреби) |

---

## Приклад: вимірювання DOM-елемента

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

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

useLayoutEffect(() => {
    // Виконується до відмальовування браузера
    const rect = boxRef.current.getBoundingClientRect();
    setWidth(rect.width);
  }, []);

return (
    <div ref={boxRef} style={{ width: "50%" }}>
      Ширина блоку: {width}px
    </div>
  );
}
```

Тут:

- `useLayoutEffect` виконується **до того**, як браузер покаже сторінку.
- Ми вимірюємо ширину блоку, поки DOM уже готовий, але ще не відображений.
- Це запобігає "миготінню" (flashing), якби ширина обчислювалася в `useEffect`.

---

## Приклад: синхронізація скролу або позиціонування

```javascript
function ScrollSync({ scrollTo }) {
  const ref = useRef(null);

useLayoutEffect(() => {
    ref.current.scrollTop = scrollTo; // точно до відмальовування
  }, [scrollTo]);

return (
    <div
      ref={ref}
      style={{ height: 200, overflowY: "scroll", border: "1px solid gray" }}
    >
      <div style={{ height: 1000 }}>Контент...</div>
    </div>
  );
}
```

Якби ми використовували `useEffect`, користувач міг би побачити "стрибок" скролу.
З `useLayoutEffect` усе відбудеться *до* показу, без артефактів.

---

## Важливо пам'ятати

| Правило | Пояснення |
|---|---|
| Виконується синхронно після змін у DOM | Блокує відмальовування до завершення коду |
| Використовуй **лише коли потрібно працювати з DOM напряму** | Наприклад, вимірювання розмірів, позиціонування |
| Не використовуй для мережевих запитів або асинхронних дій | Це гальмує відмальовування сторінки |
| Можна мати і `useEffect`, і `useLayoutEffect` в одному компоненті | React сам вирішує порядок (layout → paint → effect) |

---

## Підсумкове порівняння

| Хук | Коли викликається | Для чого |
|---|---|---|
| `useEffect` | Після того як браузер показав зміни | Побічні ефекти, що не впливають на DOM |
| `useLayoutEffect` | До того як браузер показав зміни | Робота з DOM, вимірювання, синхронізація перед відмальовуванням |

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Що робить `useLayoutEffect()` | Виконує код одразу після оновлення DOM, але до того, як браузер відмалює зміни |
| Коли використовувати | Коли потрібно виміряти або змінити DOM перед показом користувачу |
| Чому обережно | Він блокує відмальовування і може погіршити продуктивність, якщо використовувати без потреби |
| Приклади | Вимірювання розмірів, скрол, анімації, запобігання миготінню контенту |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати523 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.