Какие знаешь инструменты мемоизации?

Инструменты мемоизации в JavaScript

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

1. Встроенные средства JavaScript

Функция memoize в Lodash

Библиотека Lodash предоставляет готовую функцию _.memoize, которая автоматически кэширует результаты. Это удобно для быстрого прототипирования.

import _ from 'lodash';

const expensiveCalculation = (n) => {
  console.log('Вычисление...');
  return n * 2;
};

const memoizedCalc = _.memoize(expensiveCalculation);
console.log(memoizedCalc(5)); // Вычисление... 10
console.log(memoizedCalc(5)); // 10 (результат из кэша)

Ручная реализация с использованием Map или объекта

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

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

2. React-специфичные инструменты

Хуки useMemo и useCallback

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

import React, { useMemo, useCallback } from 'react';

function MyComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]); // Пересчёт только при изменении items или filter

  const handleClick = useCallback(() => {
    console.log('Обработчик клика');
  }, []); // Функция сохраняется между рендерами

  return <List items={filteredItems} onClick={handleClick} />;
}

React.memo для компонентов

Высокоуровневая мемоизация целых компонентов, предотвращающая их перерисовку при одинаковых пропсах.

const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* тяжёлые вычисления */}</div>;
}, (prevProps, nextProps) => {
  // Кастомная функция сравнения
  return prevProps.data.id === nextProps.data.id;
});

3. Специализированные библиотеки

Reselect для Redux

Библиотека Reselect создаёт мемоизированные селекторы, которые вычисляют производные данные из состояния Redux. Это предотвращает повторные вычисления при одинаковых входных данных.

import { createSelector } from 'reselect';

const getItems = state => state.items;
const getFilter = state => state.filter;

export const getFilteredItems = createSelector(
  [getItems, getFilter],
  (items, filter) => items.filter(item => item.includes(filter))
);

fast-memoize

Легковесная библиотека, которая автоматически выбирает оптимальную стратегию сериализации аргументов (JSON.stringify, Map и др.).

import memoize from 'fast-memoize';

const memoizedFunc = memoize((a, b) => a + b);

4. Современные возможности JavaScript

WeakMap для мемоизации с объектами в качестве ключей

WeakMap позволяет использовать объекты как ключи без риска утечек памяти, так как ссылки в WeakMap являются слабыми.

const memoizeWithWeakMap = (fn) => {
  const cache = new WeakMap();
  return (obj) => {
    if (cache.has(obj)) {
      return cache.get(obj);
    }
    const result = fn(obj);
    cache.set(obj, result);
    return result;
  };
};

5. Паттерны и лучшие практики

• Селекторы в Redux Toolkit: Встроенная поддержка мемоизации через createSelector.
• Кэширование на уровне HTTP-запросов: Использование библиотек типа React Query или SWR, которые автоматически кэшируют данные запросов.
• Мемоизация в Node.js: Применение тех же принципов для серверных вычислений, особенно в обработчиках GraphQL-резолверов.

Критерии выбора инструмента

При выборе инструмента мемоизации я оцениваю:

1. Контекст использования: React-компоненты, селекторы состояния, чистые функции.
2. Тип аргументов: Примитивы, объекты, массивы — от этого зависит стратегия создания ключа кэша.
3. Частоту изменений: Если данные меняются часто, мемоизация может приносить больше накладных расходов, чем пользы.
4. Сложность вычислений: Мемоизация оправдана только для действительно "тяжёлых" операций.

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

В современных проектах я чаще всего комбинирую useMemo/useCallback в компонентах React, Reselect для управления состоянием и кастомные мемоизаторы для сложных алгоритмических задач.