Memoización y caching

Memoización y caching

La memoización guarda el resultado de funciones costosas para reutilizarlos con las mismas entradas. Es una técnica poderosa para mejorar rendimiento.

Memoización básica

function memoize(fn) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

// Example
const slowFib = n => n <= 1 ? n : slowFib(n - 1) + slowFib(n - 2);
const fastFib = memoize(slowFib);

fastFib(40); // Cached for subsequent calls

Cache con expiración (TTL)

function memoizeWithTTL(fn, ttl = 60000) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    const now = Date.now();
    
    if (cache.has(key)) {
      const { value, timestamp } = cache.get(key);
      if (now - timestamp < ttl) {
        return value;
      }
    }
    
    const result = fn(...args);
    cache.set(key, { value: result, timestamp: now });
    return result;
  };
}

Memoización en React

// useMemo and useCallback
function MyComponent({ items }) {
  const filtered = useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);
  
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);
  
  return ;
}

Cache de resultados async

// Simple async cache
const asyncCache = new Map();

async function fetchWithCache(url) {
  if (asyncCache.has(url)) {
    return asyncCache.get(url);
  }
  
  const promise = fetch(url).then(r => r.json());
  asyncCache.set(url, promise);
  
  return promise;
}