DOM и React Middle memo, useMemo, useCallback обновлено
useMemo с зависимостями
Условие
Компонент фильтрует список дорогой функцией filterFn(items, q). Функция должна вызываться только при смене items или q, но не при смене несвязанного пропса tick.
Что проверяют тесты
фильтрует
не пересчитывает на несвязанном пропсе
пересчитывает при смене запроса
Как подойти
useMemo кеширует значение, пока зависимости не изменились по Object.is - а массивы и объекты сравниваются по ссылке, поэтому новый литерал в пропсах сбрасывает кеш. Массив зависимостей обязан быть полным - неполный даёт устаревший результат, что хуже лишнего пересчёта. Важно помнить: это оптимизация, а не гарантия - React вправе выбросить кеш.
Подсказки: 2
- useMemo(() => …, [зависимости]) кеширует результат между рендерами.
- В зависимости попадает всё, что читается внутри, включая саму функцию.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props