Что такое мемоизация

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

Во frontend вы встретите эту идею в двух местах. Первое, тяжелые вычисления в JavaScript: фильтрация большого массива, сортировка, построение derived data. Второе, React-рендеры: если props не изменились, можно не пересчитывать компонент или не создавать новую ссылку без причины.

На интервью важно сказать прямо: мемоизация не делает алгоритм магически быстрым. Она меняет цену повторных вызовов. Первый вызов все равно выполняет работу. Потом появляется цена хранения, сравнения зависимостей и поддержки кода.

Можно ответить так:

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

Такой ответ звучит практично. Вы показываете принцип, инструменты и ограничение. Это лучше, чем просто перечислить React.memo, useMemo и useCallback без объяснения, когда они действительно помогают.

Главный критерий простой: есть ли повторная работа, которую дорого делать снова. Если компонент простой, вычисление занимает микросекунды, а результат не передается в дочерний компонент с React.memo, мемоизация может быть шумом.

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

Не используйте мемоизацию как способ управлять побочными эффектами. useMemo выполняется во время рендера и должен возвращать значение. Если положить туда fetch, подписку или запись во внешнее хранилище, можно получить лишний запрос, гонку ответов, зависший loading или обновление state после размонтирования.

Безопаснее держать сетевую логику в useEffect с полной зависимостью от параметров запроса, обработкой loading, error и cleanup. Если запрос можно отменить, добавьте отмену через AbortController или механизм вашего слоя данных.

В React важно не смешивать инструменты:

• React.memo оборачивает компонент и позволяет пропустить рендер, если props не изменились.
• useMemo возвращает мемоизированное значение.
• useCallback возвращает мемоизированную функцию.

Пример с derived data:

function ProductList({ products, query }) {
  const visibleProducts = useMemo(() => {
    return products.filter((product) =>
      product.title.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  return <List items={visibleProducts} />;
}

Здесь результат фильтрации пересчитывается только при изменении products или query. Если забыть query в зависимостях, UI может показывать старый список после ввода нового текста.

React.memo особенно часто не дает эффекта из-за новых ссылок. Объект, массив или функция, созданные внутри render, получают новую ссылку на каждом рендере. Для React это новый prop.

Плохой пример:

const UserCard = React.memo(function UserCard({ user, actions }) {
  return <button onClick={actions.onSelect}>{user.name}</button>;
});

function Page({ user }) {
  return (
    <UserCard
      user={user}
      actions={{ onSelect: () => console.log(user.id) }}
    />
  );
}

Здесь actions каждый раз новый, поэтому UserCard видит изменившийся prop. На практике это дает лишние рендеры дочернего компонента и забирает пользу у React.memo. Лучше стабилизировать только то, что правда нужно дочернему компоненту:

const UserCard = React.memo(function UserCard({ user, onSelect }) {
  return <button onClick={() => onSelect(user.id)}>{user.name}</button>;
});

function Page({ user }) {
  const handleSelect = useCallback((id) => {
    console.log(id);
  }, []);

  return <UserCard user={user} onSelect={handleSelect} />;
}

Такой код не гарантирует, что ререндеров не будет вообще. Но он убирает одну частую причину лишних рендеров, новую ссылку на callback или объект.

В обычном JavaScript мемоизацию часто делают через замыкание и Map. Это удобно для чистых функций, где одинаковые аргументы дают одинаковый результат.

function memoizeOneArg(fn) {
  const cache = new Map();

  return (arg) => {
    if (cache.has(arg)) {
      return cache.get(arg);
    }

    const result = fn(arg);
    cache.set(arg, result);
    return result;
  };
}

Этот пример простой, но у него есть ограничение. Если аргументов много и они почти всегда разные, cache будет расти и не даст пользы. Для реального кэша нужно понимать ключи, срок жизни данных и момент очистки.

На интервью лучше говорить не так, будто мемоизация всегда ускоряет код. Точнее сказать: мемоизация может ускорить повторную работу, если цена вычисления выше цены кэша. Так вы показываете, что используете оптимизацию осознанно, а не по привычке.

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