A tiny utility to cache function outputs easily (fully typed)
<a href="https://github.com/lacherogwu/cache-func" target="_blank" rel="noopener nofollow">https://github.com/lacherogwu/cache-func</a>
<pre><code class="language-js">import { cacheFunc } from &#x27;cache-func&#x27;;

function expensiveCalculation() {
	// it could be here anything here, like a long loop, a network request, etc.
	console.log(&#x27;Calculating...&#x27;);
	return 42;
}

const cachedCalculation = cacheFunc(expensiveCalculation);

console.log(cachedCalculation()); // Logs &quot;Calculating...&quot; and then &quot;42&quot;
console.log(cachedCalculation()); // Logs &quot;42&quot; without recalculating
</code></pre>

An independent Squad for discussions, questions and answers about Next.JS. 


NextJS

A brief guide on using a tiny utility called 'cache-func' to cache the outputs of functions efficiently in JavaScript. The example demonstrates a simple use case where an expensive calculation is cached, showing the significant performance improvement.

A tiny utility to cache function outputs easily

<ol>
<li>This needs to be an npm package? It’s like six lines of code to implement <code>memoize()</code> yourself. Jeez.</li>
<li>The implementation has an <code>options</code> object with just one property <code>maxAge</code> and both are… optional? On a cache wrapper? So you can wrap a function in the cache wrapper but not cache it? Riiiiiiiight.</li>
<li>It does an unnecessary check for <code>lastRun !== undefined</code> too. This is why there’s more than two lines of code, they’re just adding stuff that doesn’t do anything.</li>
<li>And finally, the caching is actually broken since it doesn’t use the function arguments as a cache key (as memoize() would), it just caches the value of calling the function of whatever arguments you passed last! So in all real world caching situations this would introduce unexpected buggy behavior.</li>
</ol>
Great job, the library author has turned this:
<pre><code class="language-javascript">let nums = [1, 2, 3];
let factor = 2;
console.log(multiply(nums, factor));
// output: [2, 4, 6]

factor = 5;
console.log(multiply(nums, factor));
// output: [5, 10, 15]
</code></pre>
into this:
<pre><code class="language-javascript">const cachedMultiply = cacheFunc(multiply, { maxAge: 5*60*1000 });
let nums = [1, 2, 3];
let factor = 2;
console.log(cachedMultiply(nums, factor));
// output: [2, 4, 6]

factor = 5;
console.log(cachedMultiply(nums, factor));
// output: [2, 4, 6]
</code></pre>
In short, this is not caching at all, it’s more like a bastard child of memoization and throttling, which manages to implement neither.
Here, let me save you an npm package:
<pre><code class="language-javascript">const memoize = &lt;T = any&gt;(fn: Func&lt;T&gt;) =&gt; {
 const cache = new Map();
 const cached = function (this: any, val: T) {
 return cache.has(val)
 ? cache.get(val)
 : cache.set(val, fn.call(this, val)) &amp;&amp; cache.get(val);
 };
 cached.cache = cache;
 return cached;
};

const throttle = (callback: Function, delay: number) =&gt; {
 var wait = false;
 return function () {
 if (!wait) {
 callback();
 wait = true;
 setTimeout(function () {
 wait = false;
 }, delay);
 }
 };
};
</code></pre>
Sources: <a href="https://decipher.dev/30-seconds-of-typescript/docs/memoize/" target="_blank" rel="noopener nofollow">https://decipher.dev/30-seconds-of-typescript/docs/memoize/</a> and <a href="https://gazar.dev/typescript/throttle-debounce-typescript-examples" target="_blank" rel="noopener nofollow">https://gazar.dev/typescript/throttle-debounce-typescript-examples</a>