> Как работают useMemo и useCallback для оптимизации производительности React-компонентов (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Иннотех, Альфа-банк, Kvando Technologies, Soft_Media_Group, ООО Премиум ИТ Солюшен, Spotware, ITFB, Домклик, IT-One, Софт Медиа Групп, EPAM, ООО Рокет Тех, ПСБ, intelsy, Арго, Evercode, Кэтрид Диджитал, Билайн

Стек: React

> Пример ответа

useMemo и useCallback - это хуки React для мемоизации, которые предотвращают лишние вычисления и перерисовки компонентов.

useMemo кеширует результат вычисления функции и обновляет его только при изменении зависимостей. Используется для дорогостоящих вычислений, которые не должны выполняться при каждом рендере:

JSX
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

Если a и b не изменились, expensiveValue останется прежним.

useCallback кеширует саму функцию, а не её результат. Возвращает ту же ссылку на функцию, пока зависимости не изменятся. Это полезно для передачи стабильных колбэков дочерним компонентам, обёрнутым в React.memo:

JSX
const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Без useCallback новая функция создавалась бы при каждом рендере, что ломало бы мемоизацию дочернего компонента.

Важно: злоупотребление этими хуками может ухудшить производительность из-за накладных расходов на сравнение зависимостей. Используйте их только при реальных проблемах с производительностью, подтверждённых профилированием.