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

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

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

Пример:

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

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