Stop Recalculating: An Intro to Memoization

#memoization #javascript #performance #coding

What is Memoization?

Memoization is an optimization technique used to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. Essentially, it allows a computer to "remember" the answer to a specific problem so it doesn't have to do the heavy lifting a second time.

The Library Analogy

Imagine you are a researcher in a giant library. Every time you need the definition of an obscure word, you have to walk to the basement, navigate a maze of shelves, find a dusty dictionary, and copy the definition. It takes 20 minutes every single time. Memoization is like keeping a small notebook on your desk. The first time you go to the basement, you write the word and its definition in your notebook. The next time you need that word, you check your notebook first. It takes five seconds instead of twenty minutes.

Why It Matters

In modern software, we often perform repetitive calculations—like fetching data from a database or calculating complex mathematical transformations. Without memoization, your application might waste thousands of CPU cycles re-calculating the exact same value. By using this pattern, engineers prevent UI lag and reduce server strain, making applications feel snappy and responsive.

Code Example

const memoizedSquare = () => {
  const cache = {};
  return (n) => {
    if (n in cache) {
      console.log('Fetching from cache...');
      return cache[n];
    }
    console.log('Calculating result...');
    const result = n * n;
    cache[n] = result;
    return result;
  };
};

const square = memoizedSquare();
square(5); // Calculates
square(5); // Fetches from cache

The Takeaway

Memoization is a trade-off: you are trading a small amount of computer memory to gain a significant boost in execution speed. By prioritizing efficiency over constant recalculation, you build software that scales gracefully under heavy usage.

Resources

GitHub Repository: react-hook-lab
react-hook-lab: npm package
Connect with me on LinkedIn: Saurav Pandey

Originally published on my blog. You can read the alternative breakdown here.

DEV Community