What is memoization?

JavaScriptJunior~2 min read

1. Definition

Memoization is an optimization technique where a function's results are cached, and on repeated calls with the same arguments they're retrieved from memory instead of being computed again.

That is:

If a function has already computed the result for a given input, the second time it simply returns the stored value.

2. Example without memoization

javascript

function slowSquare(n) {
  console.log('Computing...');
  return n * n;
}

console.log(slowSquare(4)); // "Computing..." -> 16
console.log(slowSquare(4)); // "Computing..." again -> 16

The problem: every call recomputes the result, even if the argument is the same.

3. Example with memoization

javascript

function memoizedSquare() {
  const cache = {};

  return function (n) {
    if (n in cache) {
      console.log('Taking from the cache');
      return cache[n];
    }

    console.log('Computing...');
    const result = n * n;
    cache[n] = result;
    return result;
  };
}

const square = memoizedSquare();

console.log(square(4)); // "Computing..." -> 16
console.log(square(4)); // "Taking from the cache" -> 16

Now the function computes the result only once, and afterward returns the value from the cache.

4. When memoization is useful

The function is pure: it depends only on its input arguments and has no side effects;
The function performs expensive computations (for example, sorting, recursion, filtering, rendering);
The function is called often with the same arguments.

5. Classic examples

Example: recursive `fibonacci`

Without memoization:

javascript

function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}

console.log(fib(40)); // Takes forever!

With memoization:

javascript

function memoFib() {
  const cache = {};

  return function f(n) {
    if (n in cache) return cache[n];
    if (n <= 1) return n;
    cache[n] = f(n - 1) + f(n - 2);
    return cache[n];
  };
}

const fib = memoFib();
console.log(fib(40)); // Almost instant

The difference is enormous: the time drops from O(2ⁿ) to O(n).

6. Memoization in React

In React, memoization is used to prevent unnecessary re-renders.

Hook	What it does	Example
`useMemo`	Memoizes a computed value	`const value = useMemo(() => expensiveCalc(data), [data])`
`useCallback`	Memoizes a function (so it isn't recreated on every render)	`const handleClick = useCallback(() => {...}, [deps])`
`React.memo`	Memoizes a component (skips re-rendering when props haven't changed)	`export default React.memo(MyComponent)`

This is the same idea as in plain JS, just at the level of React components.

7. Popular libraries

lodash.memoize, a ready-made implementation:

javascript
import memoize from 'lodash.memoize'; const square = memoize(x => x * x); console.log(square(5)); // computes it console.log(square(5)); // from the cache
memoizee, an advanced cache with TTL, max size, and more.

8. When you shouldn't use memoization

The function is nearly instant (cheap computations);
The arguments are different every time (no point caching);
Memory is limited (too large a cache can eat up RAM);
The function has side effects (an HTTP request, mutating external data).

A short summary

What it is	Why	When to use it
Caching a function's results	Speeds up repeated computations	With frequent calls using the same arguments
Works for "pure" functions	No side effects	When computations are expensive
Not suited for unpredictable inputs	No repeats, no benefit	-

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.