𝗕𝗲𝘄𝗮𝗿𝗲 𝗼𝗳 𝗹𝗼𝗱𝗮𝘀𝗵.𝗺𝗲𝗺𝗼𝗶𝘇𝗲

Lodash memoize lijkt op gratis prestatiewinst. Je omhult een functie en krijgt een cache.

Maar het standaardgedrag bevat een valstrik. Het bouwt de cache-key alleen op basis van het eerste argument. Alle andere argumenten worden genegeerd.

Als je één argument gebruikt, ben je veilig. Als je er twee of meer gebruikt, creëer je bugs.

Bekijk dit voorbeeld:

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

add(1, 2); // Geeft 3 terug. Het cachet het resultaat onder de key 1. add(1, 9); // Geeft 3 terug. Dit is fout. Het zou 10 moeten zijn.

Lodash ziet opnieuw een 1. Het vindt de 1 in de cache. Het geeft het oude resultaat terug. Het kijkt nooit naar de 9.

Valutaformattering is een veelvoorkomende valstrik.

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

formatPrice(100, 'USD'); // Geeft "$100.00" terug. De key is 100. formatPrice(100, 'EUR'); // Geeft "$100.00" terug. Dit is fout.

De tweede aanroep negeert 'EUR'. Het ziet 100 in de cache en geeft dollars terug in plaats van euro's. Er is geen foutmelding. Er is geen waarschuwing. Je laat simpelweg het verkeerde bedrag aan je gebruikers zien.

Je moet een tweede argument opgeven om de cache-key te definiëren. Deze key moet elke input dekken.

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"

De key moet alles vastleggen wat de output verandert.

Tot slot: memoization brengt risico's met zich mee. Gebruik het alleen wanneer een functie rekenintensief is en vaak wordt uitgevoerd met dezelfde inputs. Voor eenvoudige functies kun je ze gewoon aanroepen. Het risico op een bug is vaak groter dan de snelheidswinst die je behaalt.

Belangrijkste punten:

Bron: https://dev.to/figsify/beware-of-lodashmemoize-it-only-remembers-the-first-argument-4cjl