PassFront
  1. PassFront
  2. База знаний
  3. Производительность в JS

Сравни способы мемоизации и объясни, когда выбирать каждый вариант.

Производительность в JS

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

Способы

Ручной кеш в замыкании

function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}

Плюс: полный контроль. Минус: ключ через JSON.stringify не работает для функций/циклов.

React useMemo / useCallback

Мемоизация значения/функции между рендерами по массиву зависимостей.

const total = useMemo(() => heavyCalc(items), [items]);

Библиотеки-селекторы (reselect)

Мемоизированные селекторы состояния: пересчёт только при изменении входов.

WeakMap-кеш по объекту-ключу

Когда ключ — объект; не мешает сборке мусора.

Как выбирать

  • Чистая функция с примитивными аргументами → ручной кеш/декоратор.
  • Значение в компоненте → useMemo.
  • Производные данные из стора → reselect.
  • Ключ-объект и важна память → WeakMap.

Коротко для собеседования

Мемоизация: ручной декоратор с Map-кешем в замыкании, useMemo/useCallback в React, reselect для селекторов, WeakMap для ключей-объектов. Выбор — по типу аргументов и месту (функция, компонент, стор).

Другие вопросы раздела