Что срабатывает раньше useEffect или useLayoutEffect

useLayoutEffect срабатывает раньше useEffect.

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

Пример:

useLayoutEffect(() => {
  console.log("useLayoutEffect - до отрисовки");
}, []);

useEffect(() => {
  console.log("useEffect - после отрисовки");
}, []);

Вывод:

1. useLayoutEffect
2. useEffect