Техпрогон
ВойтиНачать бесплатно
Выбор ответа Middle memo, useMemo, useCallback обновлено

Неполные зависимости useMemo

Вопрос

Пользователь меняет query, но список не фильтруется заново. В чём ошибка?

const visible = useMemo(
  () => items.filter(i => i.title.includes(query)),
  [items]
);

Попробуйте сами

Выберите вариант, и откроется разбор.

Показать ответ и разбор

Коротко

Правильный ответ: В зависимостях нет query, и кеш не пересчитывается. useMemo пересчитывает значение только при изменении перечисленных зависимостей. query читается внутри, но не указан, поэтому результат залипает.

Варианты ответа

  1. useMemo нельзя использовать с filter, он кеширует лишь примитивы
  2. Нужно заменить на useCallback, он пересчитывает при каждом вызове
  3. В зависимостях нет query, и кеш не пересчитываетсяправильный ответ
  4. items должен быть state, а не пропом, иначе useMemo не видит смену

Разбор

useMemo пересчитывает значение только при изменении перечисленных зависимостей. query читается внутри, но не указан, поэтому результат залипает. Нужно [items, query], это подскажет линтер exhaustive-deps. filter в useMemo допустим. useCallback кеширует функцию, а не результат. Источник items значения не имеет.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

useCallback без memo

Следующий вопрос

useMemo против useCallback

Урок по теме

memo, useMemo, useCallback и React Compiler

Термины по теме

React Compiler

Ещё по теме «memo, useMemo, useCallback»

Все вопросы модуля