Что выполняется раньше — useMemo или useEffect?

В React рендер компонента — это синхронный процесс, в ходе которого вычисляется JSX. Хуки useMemo и useEffect участвуют в этом процессе на разных этапах, и понимание их порядка критично для правильной работы с зависимостями и побочными эффектами.

Порядок выполнения

Когда компонент рендерится, React сначала выполняет тело функции компонента. В этот момент вызываются все хуки в порядке их объявления. useMemo вычисляется прямо во время рендера — синхронно, до того как React применит изменения к DOM. useEffect же регистрируется во время рендера, но его колбэк откладывается и вызывается после того, как браузер отрисует изменения (commit phase).

• Render phase: тело компонента, useMemo, вычисление JSX.
• Commit phase: обновление DOM.
• Effect phase: вызов колбэков useEffect (и useLayoutEffect — до отрисовки, но после DOM).

Пример

function Example({ items }) {
  console.log('render');

  const total = useMemo(() => {
    console.log('useMemo');
    return items.reduce((s, i) => s + i, 0);
  }, [items]);

  useEffect(() => {
    console.log('useEffect');
  }, [total]);

  return <div>{total}</div>;
}
// Порядок логов: render -> useMemo -> useEffect

Практические следствия

• Внутри useMemo нельзя безопасно читать DOM — он ещё не обновлён.
• useEffect подходит для запросов, подписок, работы с DOM.
• Если значение из useMemo нужно в useEffect, оно уже будет доступно в момент вызова эффекта.

Итог: useMemo всегда выполняется раньше useEffect, потому что относится к фазе рендера, а useEffect — к фазе после отрисовки. Используйте useMemo для дорогих вычислений, а useEffect — для побочных эффектов, зависящих от уже отрендеренного состояния.