Suggest an edit

Improve this article

Refine the answer for “What is memoization?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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 | - |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts572 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.