PassFront
  1. PassFront
  2. База знаний
  3. Хуки

За что отвечает второй параметр в useMemo?

Хуки

Второй параметр useMemo — массив зависимостей: он отвечает за то, когда пересчитывать закешированное значение.

Как работает

const report = useMemo(
  () => buildReport(orders, period),  // первый параметр: что вычислять
  [orders, period],                    // второй: когда пересчитывать
);

На каждом рендере React сравнивает элементы массива с их значениями из прошлого рендера (поэлементно, через Object.is):

  • всё совпало → колбэк не вызывается, возвращается сохранённый результат;
  • что-то изменилось → колбэк выполняется заново, новый результат кешируется.

Крайние случаи

useMemo(() => build(), []);   // вычислить один раз при монтировании
useMemo(() => build());       // без массива: пересчёт каждый рендер — useMemo бесполезен

Правила заполнения

  • Полнота: все реактивные значения, используемые в колбэке (props, state, переменные компонента), обязаны быть в массиве, иначе результат «застынет» с устаревшими данными (ESLint exhaustive-deps следит).
  • Стабильность элементов: объект/функция, создаваемые заново каждый рендер, в качестве зависимости обнуляют кеширование — сначала стабилизировать их (useMemo/useCallback) или заменить примитивами (user.id вместо user).
  • Мутации не видны: изменение поля объекта не меняет ссылку — пересчёта не будет; обновления должны быть иммутабельными.

Коротко для собеседования

Второй параметр useMemo — массив зависимостей: пока его элементы равны прошлым (Object.is), возвращается кеш; изменились — колбэк пересчитывается. Требования: полный список используемых реактивных значений, стабильные ссылки в зависимостях, иммутабельные обновления. Без массива useMemo не имеет смысла.

Другие вопросы раздела