В чём разница между useEffect и useLayoutEffect?

Question

IT Interview Practice · Accepted Answer

Оба запускают эффекты, но в **разные моменты относительно отрисовки браузером** — и именно эта временная разница является ключевым моментом.

- **`useEffect`** запускается **после** того, как браузер произвел отрисовку. Это асинхронно и неблокирующе. Используйте его практически для всего (данные, подписки, логирование).
- **`useLayoutEffect`** запускается **синхронно после изменения DOM, но ДО отрисовки браузером**. Используйте его, когда вам нужно прочитать layout и изменить DOM в одном и том же кадре, чтобы избежать видимого мерцания.

```text
render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
```

## Почему это важно

Представьте, что вы измеряете элемент и переопределяете позицию tooltip на основе его размера. С `useEffect` пользователь ненадолго увидит tooltip в неправильном месте, а потом он прыгнет:

```jsx
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect();
  setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
```

С `useEffect` тот же код запускается после отрисовки → мерцание на один кадр.

## Почему не стоит использовать его по умолчанию

- Он **блокирует отрисовку**: тяжелая работа в `useLayoutEffect` делает интерфейс рывким, потому что браузер не может рисовать до завершения.
- Он **предупреждает при SSR** (не может работать на сервере, где нет layout).

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

Почему это важно

Почему не стоит использовать его по умолчанию

Похожие вопросы