import numeral from "numeral"; import memoize from "lodash.memoize"; const formatNumberFull = memoize(distance => numeral(distance).format("0,0")); formatNumberFull(20000); formatNumberFull(20000); formatNumberFull(350000); formatNumberFull(20000); formatNumberFull(50000); formatNumberFull(20000); formatNumberFull(20000); formatNumberFull(50000); formatNumberFull(60000); formatNumberFull(350000); formatNumberFull(60000); const cache = formatNumberFull.cache.__data__.hash.__data__; const formatted = JSON.stringify(cache, 0, 4); console.log("Cache:"); console.log(formatted); document.getElementById("app").innerHTML = `

Lodash Memoize

The method "formatNumberFull" was created as:

const formatNumberFull = memoize(distance => numeral(distance).format("0,0"));

This was run in the app:

formatNumberFull(20000);
formatNumberFull(20000);
formatNumberFull(20000);
formatNumberFull(50000);
formatNumberFull(20000);
formatNumberFull(20000);
formatNumberFull(50000);
formatNumberFull(60000);
formatNumberFull(60000);
formatNumberFull(60000);

This is what's in the cache:

${formatted}

Now, every time formatNumberFull(XXX); is called, the results of the function for that argument will be cached and returned the next time the funciton is called with the same argument.

Based on this blog post: https://calendee.com/2018/10/21/understanding-lodash-memoize/

IMPORTANT: Be aware that by default, "memoize" only resolves/caches based on the first number. It can return the wrong information if used incorrectly. See : https://codesandbox.io/s/lodash-memoize-75mpw

Lodash Memoize

Using Lodash Memoize