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

useEffect выполняется после того, как браузер отрисовал изменения на экран. Это значит, что эффекты, заданные через useEffect, не блокируют визуальное обновление UI. Обычно его используют для асинхронных операций, подписок, запросов и т.п.
useLayoutEffect вызывается синхронно сразу после всех изменений DOM, но до того, как браузер успеет отрисовать обновления на экран. Это позволяет выполнять операции, которые должны произойти до отображения, например, измерения DOM-элементов или синхронизацию с layout.

Пример:

useLayoutEffect(() => {
  const height = ref.current.clientHeight;
  // Можно сразу изменить состояние, чтобы избежать мерцания
}, []);

useEffect(() => {
  // Здесь можно делать запросы, подписки и т.п.
}, []);

Если использовать useEffect для измерения DOM, может возникнуть мерцание, так как обновление состояния произойдет после отрисовки. useLayoutEffect помогает избежать этого, выполняя код до отображения.

Чем useLayoutEffect отличается от useEffect?