Остерегайтесь lodash.memoize

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

Но в поведении по умолчанию кроется ловушка. Он строит ключ кэша только на основе первого аргумента. Все остальные аргументы игнорируются.

Если вы используете один аргумент, вы в безопасности. Если два или более — вы создаете баги.

Посмотрите на этот пример:

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

add(1, 2); // Возвращает 3. Результат кэшируется под ключом 1. add(1, 9); // Возвращает 3. Это ошибка. Должно быть 10.

Lodash снова видит 1. Он находит 1 в кэше и возвращает старый результат. На 9 он даже не смотрит.

Форматирование валют — распространенная ловушка.

const formatPrice = memoize((amount, currency) => new Intl.NumberFormat('en', { style: 'currency', currency }).format(amount) );

formatPrice(100, 'USD'); // Возвращает "$100.00". Ключ — 100. formatPrice(100, 'EUR'); // Возвращает "$100.00". Это ошибка.

Второй вызов игнорирует 'EUR'. Он видит 100 в кэше и возвращает доллары вместо евро. Ошибки нет. Предупреждения нет. Вы просто показываете пользователям неправильную сумму.

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

const formatPrice = memoize( (amount, currency) => new Intl.NumberFormat('en', { style: 'currency', currency }).format(amount), (amount, currency) => ${amount}|${currency} );

formatPrice(100, 'USD'); // "$100.00" formatPrice(100, 'EUR'); // "€100.00"

Ключ должен фиксировать всё, что влияет на результат.

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

Основные выводы:

Источник: https://dev.to/figsify/beware-of-lodashmemoize-it-only-remembers-the-first-argument-4cjl