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

Для чего нужен второй callback в useMemo?

Хуки

Вероятно, имеется в виду второй аргумент useMemo — массив зависимостей (сам колбэк там один, первый аргумент). Массив управляет тем, когда кешированное значение пересчитывается.

Роль второго аргумента

const filtered = useMemo(
  () => products.filter((p) => p.category === category), // 1-й: что вычислять
  [products, category],                                   // 2-й: когда пересчитывать
);

При рендере React сравнивает каждый элемент массива с прошлым значением через Object.is:

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

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

  • Включать все реактивные значения, используемые в колбэке (props, state, переменные из тела компонента) — следит ESLint exhaustive-deps.
  • Пропущенная зависимость → устаревший результат: filtered не обновится при смене category, если её нет в массиве.
  • Нестабильная зависимость (инлайн-объект, новая функция) → кеш бесполезен, пересчёт каждый рендер.

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

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

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

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

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