Хук useLayoutEffect() выполняет те же действия, что и useEffect(), но вызывает эффект синхронно после всех изменений в DOM. Он может использоваться для выполнения действий, которые зависят от размеров или позиций элементов в DOM.
useLayoutEffect(() => {
// выполнить действия после изменений в DOM
}, [deps])В этом примере, useLayoutEffect() вызывает функцию после изменений в DOM, когда зависимости изменились. Он может быть полезен для выполнения действий, которые зависят от размеров или позиций элементов в DOM, например, для выполнения анимации.
| useLayoutEffect() | useEffect() |
|---|---|
| синхронное выполнение хука | асинхронное выполнение хука |
| будет вызван после того, как браузер отрисует компоненты. | будет вызван до того, как браузер сможет отрисовать компоненты. Срабатывает когда компоненты уже находятся на Virtual DOM (в памяти и можно прочитать/установить различные свойств), но еще не были отрисованы браузером. |
| применяет сайдэфекты ПОСЛЕ фазы отрисовки (paint) в браузере. | применяет сайдэфекты после расчёта макета (dom calculating / layout / reflow) страницы и ДО фазы отрисовки (paint) в браузере. |