Wat is memoization en hoe implementeer je het?

Question

Accepted Answer

**Memoization** slaat de resultaten van een functie op in een cache met sleutels op basis van de argumenten, dus herhaalde aanroepen met dezelfde invoer retourneren onmiddellijk het gecachte resultaat in plaats van opnieuw te berekenen. Het verhandelt **geheugen voor snelheid** en werkt alleen voor **pure** functies (zelfde invoer → zelfde uitvoer, geen bijeffecten).

## Een generieke memoize wrapper

```js
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args); // build a cache key from the arguments
    if (cache.has(key)) {
      return cache.get(key);          // cache hit — skip the work
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const slowSquare = n => { /* expensive */ return n * n; };
const fastSquare = memoize(slowSquare);
fastSquare(4); // computes → 16
fastSquare(4); // cached → 16 instantly
```

## Een klassieke winst: recursieve Fibonacci

```js
const fib = memoize(n => (n < 2 ? n : fib(n - 1) + fib(n - 2)));
// turns exponential O(2^n) into roughly O(n) by caching subproblems
```

## Trade-offs en kanttekeningen

- **Cache-sleutelstrategie**: `JSON.stringify` werkt niet voor functies, en sleutelvolgorde is belangrijk voor objecten. Voor objectargumenten voorkomt een `WeakMap` (gesleuteld op referentie) geheugenlekken.
- **Onbeperkte groei**: de cache krimpt nooit — gebruik een **LRU**-cache voor langdurige processen.
- Memoize alleen als herberekening echt duur is en invoer zich herhaalt.

## Waarom het belangrijk is

Memoization is overal: React `useMemo`/`React.memo`, Reselect-selectors, dynamisch programmeren.

Het concept (pure resultaten per invoer cachen) is hetzelfde; de kunst is het kiezen van de sleutel en het beperken van de cache.