> Что такое мемоизация (React)

Короткий ответ

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

Подробное объяснение

Мемоизация основана на принципе: если функция вызывается с одинаковыми входными данными, нет смысла выполнять её заново - можно вернуть сохранённый результат. Это особенно полезно для чистых функций, которые не имеют побочных эффектов и всегда возвращают одно и то же для одних и тех же аргументов.

В React мемоизация применяется на нескольких уровнях:

• React.memo - обёртка для компонента, предотвращающая его перерисовку, если props не изменились (поверхностное сравнение).
• useMemo - кэширует результат вычисления между рендерами, пересчитывая его только при изменении зависимостей.
• useCallback - кэширует саму функцию, чтобы её ссылка не менялась между рендерами, если зависимости не изменились.

Важно понимать trade-off: мемоизация добавляет накладные расходы на хранение кэша и сравнение зависимостей. Её стоит применять только для дорогих вычислений или компонентов, которые часто перерисовываются без необходимости.

На практике

В React мемоизация чаще всего используется в трёх сценариях:

1. Тяжёлые вычисления - например, фильтрация или сортировка большого массива данных. useMemo предотвращает повторное выполнение на каждом рендере.
2. Передача callback'ов в дочерние компоненты - useCallback стабилизирует ссылку на функцию, чтобы React.memo в дочернем компоненте сработал корректно.
3. Предотвращение лишних рендеров - React.memo оборачивает компонент, который получает сложные props (объекты, массивы) и не должен перерисовываться при каждом обновлении родителя.

Не стоит мемоизировать всё подряд - это может ухудшить производительность из-за затрат на сравнение зависимостей. Профилируйте приложение перед оптимизацией.

Пример кода

JSX
import { useMemo, useCallback, memo } from 'react';

// Тяжёлое вычисление с useMemo
function ExpensiveList({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return <ul>{filteredItems.map(item => <li key={item}>{item}</li>)}</ul>;
}

// Стабилизация callback с useCallback
function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return <Child onClick={handleClick} />;
}

// Предотвращение лишнего рендера с React.memo
const Child = memo(function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
});

Как отвечать на собеседовании

Начни с краткого определения мемоизации как кэширования результатов функции. Затем объясни, зачем это нужно в React: для оптимизации производительности за счёт предотвращения лишних вычислений и рендеров. Перечисли три основных инструмента: React.memo, useMemo, useCallback. Приведи простой пример, когда мемоизация оправдана (например, фильтрация списка). Важно упомянуть, что мемоизация не бесплатна и её не стоит применять без необходимости - сначала нужно профилировать.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание базового принципа мемоизации (кэширование результата по аргументам).
• Знание конкретных API React для мемоизации и их различий.
• Умение определять, когда мемоизация действительно нужна, а когда она избыточна.
• Понимание trade-off'ов: затраты на сравнение зависимостей vs выигрыш в производительности.

Типичные ошибки

• Мемоизация всего подряд без профилирования - это ухудшает читаемость и может снизить производительность.
• Путаница между useMemo и useCallback: первый кэширует значение, второй - функцию.
• Забывание указать массив зависимостей или указание неправильных зависимостей, что приводит к багам.
• Использование React.memo с props, которые каждый раз создаются заново (объекты, массивы) - в этом случае мемоизация не работает.
• Применение useMemo для простых вычислений, где накладные расходы превышают выгоду.