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

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

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

Основное отличие:

• useEffect — асинхронный, запускается после отрисовки браузером.
• useLayoutEffect — синхронный, запускается сразу после изменений DOM, до отрисовки браузером.

Пример:

useLayoutEffect(() => {
  // Измеряем размеры элемента и сразу меняем стиль
}, [dependencies]);

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