JavaScript Memoization, useMemo Dung

Memoization function call result cache (arguments key). same arguments vaj cached value nob (work redo pagh). JavaScript developers law' React useMemo vo' Sov. 'ach general technique narrow application: plain functions, recursive algorithms, server-side code (rendering pagh) Daq Dun.

core pattern

Memoization wej Dochmey poQ: arguments vo' cache key derive, cached results store, wrapper (real function qaSpa' store legh).

function memoize(fn, keyFn = (...args) => JSON.stringify(args)) {
  const cache = new Map();

  return function memoized(...args) {
    const key = keyFn(...args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log(`Computing for ${n}...`);
  let total = 0;
  for (let i = 0; i < n * 1e7; i++) total += i;
  return total;
}

const memoized = memoize(expensiveCalculation);

memoized(5); // Computing for 5... (slow)
memoized(5); // instant, no log line — served from cache
memoized(6); // Computing for 6... (slow, different key)

default JSON.stringify key function primitive 'ej simple object arguments vaD Dun. functions, Map/Set arguments, key order unstable objects Qaw'. custom keyFn pass.

React Dung qatlh

useMemo component render Hoch value recompute Qotlh. real use case. 'ach memoization function vaD Dun:

• Pure (same input same output), 'ej
• Expensive vs cache lookup (database query, huge string regex, recursive computation).

React poQ pagh. Node.js API handler (same aggregate report burst request Hoch recompute), CLI tool (same config file re-parse), recursive algorithm (same subproblem repeat) - Hoch Dun candidates.

classic: recursive Fibonacci

naive recursive Fibonacci textbook example: performance difference dramatic.

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

fib(35) 30 million calls, same values recompute - fib(10) thousands times subproblem. Memoization distinct n Hoch wa' call:

function memoizedFib() {
  const cache = new Map([[0, 0], [1, 1]]);

  function fib(n) {
    if (cache.has(n)) return cache.get(n);
    const result = fib(n - 1) + fib(n - 2);
    cache.set(n, result);
    return result;
  }

  return fib;
}

const fib = memoizedFib();
fib(35); // 30 million calls collapse to 36

memoization recursion Daq ("top-down dynamic programming"): generic memoize() wrapper rap, recursive function Daq hand applied (call Hoch cache legh).

cache growth trade-off (footnote pagh)

unbounded Map cache memory leak: function distinct arguments law' app lifetime Daq. memoized per-request handler long-running server Daq unbounded memory slowly grow. LRU (least-recently-used) eviction policy cache bound:

function memoizeWithLimit(fn, maxSize = 100) {
  const cache = new Map();

  return function memoized(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      const value = cache.get(key);
      cache.delete(key);
      cache.set(key, value); // move to "most recently used" position
      return value;
    }

    const result = fn.apply(this, args);
    cache.set(key, result);

    if (cache.size > maxSize) {
      const oldestKey = cache.keys().next().value; // Map preserves insertion order
      cache.delete(oldestKey);
    }

    return result;
  };
}

Map insertion order iterate, access key re-insert (delete, set) end Daq jaH - LRU eviction (linked list pagh).

useMemo "memoization React vaD" pagh

useMemo(() => computeThing(a, b), [a, b]) generic pattern legh 'ach React-specific semantics:

• cache wa' entry neH: last dependency array. Map pagh. new dependency array previous result evict.
• React memoized value discard 'ej recompute laH (memory pressure). useMemo performance hint, correctness guarantee pagh. side effects vaD lo' Qo'.
• component instance lifetime neH.

generic memoize() Map cache constraints pagh safety rails pagh - component Daq Qagh tool (unbounded growth), standalone pure function vaD Dun.

memoize Qo'

Memoization memory CPU time trade. function cheap vaj Qagh (cache lookup recompute law' Huch). arguments rarely repeat (cache never hit = overhead). function pure pagh (mutable external state - stale wrong answers). profile qaSpa' - memoization measured hotspot fix (default pagh).