Memoizing promise call to increase the performance of your client/server side javascript code 💪

If I assume those who are reading this post have some experience in programming in javascript either in client or server side. Then I can safely say that there are times when you have situation when you have to made a lot of repetitive promise calls. Now you will say

What’s your problem

To which my reply is

Yes! I do have a problem

Let’s consider a situation where you could face problem making repetitive promise calls. Like say you have a search input box and when you type something it will fetch some resource from your backend and to make it more interesting it is a single page app. The problem will come if you type the same text again in the input box and press the search button to make the request. There we go it will make the same request again.

Code for the above

const search_box = document.getElementById('#search_box')
const search_button = document.getElementById('#search_button')
search_button.onclick = () => {
    const value = search_box.value
    const searchQuery = `q=${value}`
    const apiurl = `https://somesearchapp.com?${searchQuery}`
    fetch(apiurl).then((res))=>{
        //do something here i don't care
    })
}

Now the above code will call your backend for the same response again and again. It is like you went to a garments shop ,bought a T shirt and placed the T Shirt in your cupboard but you are too lazy to search the T shirt from your cupboard and decide to go to the same shop and buy the same T shirt. Imagine the loss of money and time.

The same thing happens with your code. Why will your client make the same request and wait for the same response. Now imagine if he has a very slow internet connection then imagine the time he has to wait.

And his/her reaction will be something like this

The last thing to do is piss your user

The solution to the above problem is memoizing your promise call. Memoizing a function means save the result of a function for a particular set of parameters and when you call the function with same set of parameters we give you the saved result for those set of parameters rather than calling the actual function with those parameters. We can do the same thing for the promise calls also BUT it is difficult.

But dunno worry we have a library for you

Chuck Norris used memoization before it was cool

The javascript library is called memoize_promise_call and is available npm registry. So just do this

npm install memoize_promise_call
or 
yarn add memoize_promise_call

Now lets improve the frontend code we wrote before

import {memoizePromise} from 'memoize_promise_call'
fetch = memoizePromise(fetch)
search_button.onclick = () => {
    const value = search_box.value
    const searchQuery = `q=${value}`
    const apiurl = `https://somesearchapp.com?${searchQuery}`
    fetch(apiurl).then((res))=>{
        //do something here i don't care
    })
}

Congrats!! Now you have a much improved frontend code which won’t make a promise call for the same thing again 🙅

Even leo is happy with the performance of your code

Here is the github repo of the above library https://github.com/Anwesh43/memoize_promise_call

Do give it a 🌟

If you have reached this line then I should thank you for reading this long post hope you have enjoyed it.