Memoization is a technique that makes the web app faster, it does this by caching the data and comparing whether the data should be renewed or not!
For example :
Suppose we are fetching some data from an API constantly
Fetching the same data, again and again, is an ineffective way and may increase performance issues!
Here comes memoization!
Approach :
So, memoization stores the data in the cache while fetching the API for the very first time.
Then, it compares the data with the cache whether it should be re-fetched or not!
Syntax :
Let’s make a function that returns the location of the mouse each second.
setTimeout(() => {
window.addEventListener('mousemove', (e) => {
console.log(e.clientX, e.clientY)
})
}, 1000)
JavaScript
Now suppose the user doesn’t move the mouse for a certain time but the program is still running and returning the same value, this is totally ineffective!
Here we can store the recent location in the cache and compare it with the new outcome whether we should return or not!
let clientX;
let clientY;
setTimeout(() => {
window.addEventListener('mousemove', (e) => {
if(e.clientX === clientX && e.clientY === clientY) return;
clientX = e.clientX;
clientY = e.clientY;
console.log(e.clientX, e.clientY);
})
}, 1000)
JavaScript
For reference :
