В какой момент вызывается useLayoutEffect и чем он отличается от useEffect?

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

В отличие от useEffect, который вызывается асинхронно после того, как браузер отрисовал изменения, useLayoutEffect блокирует отрисовку до завершения своего кода.

Пример:

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

useEffect(() => {
  // Здесь можно выполнять побочные эффекты, не влияющие на визуальное отображение
}, []);