Hook useMemo

Cachea el resultado de un cálculo costoso entre renderizados.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
 
// Memoiza un array/objeto derivado para estabilizar referencias
const filtered = useMemo(
  () => items.filter((item) => item.active),
  [items]
);

Cuándo usarlo: Tienes un cálculo costoso que no debe volver a ejecutarse en cada renderizado, o necesitas una referencia estable de objeto/array para un array de dependencias o prop de hijo.

Ejemplo Funcional

"use client";
 
import { useMemo, useState } from "react";
 
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
export function FibonacciCalculator() {
  const [num, setNum] = useState(10);
  const [theme, setTheme] = useState<"light" | "dark">("light");
 
  const result = useMemo(() => fibonacci(num), [num]);
 
  return (
    <div className={theme === "dark" ? "bg-gray-900 text-white p-4" : "bg-white text-black p-4"}>
      <label className="flex items-center gap-2">
        n =
        <input
          type="number"
          value={num}
          onChange={(e) => setNum(Number(e.target.value))}
          className="w-20 border rounded px-2 py-1"
          max={40}
        />
      </label>
      <p className="mt-2 font-mono">fibonacci({num}) = {result}</p>
      <button
        onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
        className="mt-2 px-3 py-1 border rounded text-sm"
      >
        Cambiar tema
      </button>
    </div>
  );
}

Lo que esto demuestra:

• El cálculo costoso fibonacci es memoizado y solo se recalcula cuando num cambia
• Cambiar el tema no recomputa el resultado de fibonacci
• Sin useMemo, cada re-renderizado (incluyendo cambio de tema) volvería a ejecutar el cálculo costoso

Profundización

Cómo funciona

• En el primer renderizado, React llama tu función factory y almacena el resultado
• En renderizados subsecuentes, React compara cada dependencia con su valor anterior usando Object.is
• Si todas las dependencias son iguales, React devuelve el resultado en caché sin llamar la factory
• Si alguna dependencia cambió, React llama la factory nuevamente y cachea el nuevo resultado
• useMemo es una optimización de rendimiento, no una garantía semántica - React puede descartar el caché en algunos casos (p. ej., componentes fuera de pantalla)

Parámetros y Valores de Retorno

Variaciones

Estabiliza un objeto para un array de dependencias:

const options = useMemo(
  () => ({ page, pageSize, sortBy }),
  [page, pageSize, sortBy]
);
 
useEffect(() => {
  fetchData(options);
}, [options]);

Memoiza una lista filtrada/ordenada:

const sortedUsers = useMemo(
  () => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

Memoiza un árbol de componentes (raro):

const chart = useMemo(
  () => <ExpensiveChart data={data} />,
  [data]
);

Notas de TypeScript

// El tipo de retorno se infiere de la factory
const total = useMemo(() => items.reduce((sum, i) => sum + i.price, 0), [items]);
// total: number
 
// Genérico explícito cuando la inferencia es muy amplia
const config = useMemo<Config>(() => ({ retries: 3, timeout: 5000 }), []);

Atrapadas

• Optimización prematura - Envolver cada valor en useMemo añade complejidad sin beneficio medible para cálculos baratos. Solución: Perfila primero. Solo memoiza cuando puedas medir un problema de rendimiento.

• Dependencias faltantes - Omitir una dependencia causa que el valor memoizado sea obsoleto. Solución: Incluye todos los valores reactivos usados dentro de la factory.

• Referencias de dependencias inestables - Si una dependencia es un objeto/array nuevo en cada renderizado, useMemo recalcula de todas formas. Solución: Memoiza la dependencia misma, o reestructura para depender de primitivos.

• Efectos secundarios en la factory - useMemo se ejecuta durante el renderizado; los efectos secundarios (fetching, subscripciones) rompen las reglas de React. Solución: Mueve los efectos secundarios a useEffect o manejadores de eventos.

• No es una garantía - React puede descartar valores memoizados para componentes fuera de pantalla y recalcular más tarde. Solución: Nunca confíes en useMemo para la corrección - solo para el rendimiento.

Alternativas

¿Cuándo vale la pena? Como regla general, memoiza cuando el cálculo toma más de ~1ms o cuando el resultado se usa como dependencia para useEffect, useCallback, o se pasa a un hijo React.memo.

Preguntas Frecuentes

const options = useMemo(
  () => ({ page, pageSize, sortBy }),
  [page, pageSize, sortBy]
);
 
useEffect(() => {
  fetchData(options);
}, [options]); // referencia estable, el efecto solo se vuelve a ejecutar cuando los valores cambian

interface Config {
  retries: number;
  timeout: number;
}
 
const config = useMemo<Config>(
  () => ({ retries: 3, timeout: 5000 }),
  []
);
// config: Config

const chart = useMemo(
  () => <ExpensiveChart data={data} />,
  [data]
);

Relacionado

• useCallback - useMemo para funciones
• useEffect - estabiliza dependencias con useMemo para evitar re-ejecutar efectos
• useDeferredValue - difiere el renderizado de contenido costoso
• useRef - almacena valores sin disparar re-renderizados