Когда применять React.memo, useMemo и useCallback?
- Зачем нужен useCallback?
React.memo пропускает перерисовку компонента, если props поверхностно равны прошлым. useMemo кэширует результат вычисления, useCallback — саму функцию между рендерами. Они работают в паре: memo-компонент бесполезен, если ему каждый раз передают новый объект или функцию — их стабилизируют useMemo/useCallback. Применять по замеру (React Profiler): для дорогих вычислений, тяжёлых списков, значений в зависимостях эффектов. Везде подряд — лишний код и сравнения.
- Сначала структура: опустить состояние ниже, передать тяжёлое через children
- React Compiler автоматически мемоизирует там, где включён
- useMemo — оптимизация, а не гарантия: React может сбросить кэш
А ещё Проверка: Profiler показывает, что компонент перерисовывается часто и долго
Подробно
const Row = memo(function Row({ item, onSelect }: Props) { ... });
function List({ items }) {
const [selected, setSelected] = useState<string>();
const onSelect = useCallback((id: string) => setSelected(id), []);
const sorted = useMemo(() => [...items].sort(byName), [items]);
return sorted.map(i => <Row key={i.id} item={i} onSelect={onSelect} />);
}Что хотят услышать
- Что делает каждый инструмент.
- Связь memo и стабильных ссылок.
- Применение по замеру Profiler.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗useCallback ускоряет любую функцию, его стоит ставить везде
- ✗React.memo работает, даже если в props каждый раз приходит новый объект или новая функция
- ✓memo пропускает рендер при равных props, хуки стабилизируют ссылки; где Profiler видит пользу
- ✗useMemo гарантирует, что значение никогда не пересчитается
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.