В чем разница между useEffect и useLayoutEffect

useEffect и useLayoutEffect выполняют схожие задачи, но различаются временем выполнения:

• useEffect вызывается асинхронно после рендера и отрисовки компонента в DOM. Подходит для сайд-эффектов, не требующих синхронного обновления (запросы, подписки).

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

useEffect(() => {
  console.log("Асинхронный эффект");
}, []);

useLayoutEffect(() => {
  console.log("Синхронный эффект (перед отрисовкой)");
}, []);

⚠️ useLayoutEffect может блокировать отрисовку, если содержит тяжелые вычисления.