Hook useMemo

Cache the result of an expensive computation between renders.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

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

Quando usar: Você tem um cálculo caro que não deve ser reexecutado a cada renderização, ou você precisa de uma referência de objeto/array estável para um array de dependências ou prop de filho.

Exemplo de Trabalho

"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"
      >
        Alternar tema
      </button>
    </div>
  );
}

O que isso demonstra:

• O cálculo caro de fibonacci é memoizado e só recalcula quando num muda
• Alternar o tema não recomputa o resultado de fibonacci
• Sem useMemo, cada re-renderização (incluindo a alternância de tema) reexecutaria o cálculo caro

Análise Detalhada

Como Funciona

• Na primeira renderização, o React chama sua função de fábrica e armazena o resultado
• Em renderizações subsequentes, o React compara cada dependência com seu valor anterior usando Object.is
• Se todas as dependências forem as mesmas, o React retorna o resultado em cache sem chamar a fábrica
• Se alguma dependência mudou, o React chama a fábrica novamente e armazena o novo resultado em cache
• useMemo é uma otimização de desempenho, não uma garantia semântica - o React pode descartar o cache em alguns casos (por exemplo, componentes fora da tela)

Parâmetros e Valores de Retorno

Variações

Estabilizar um objeto para um array de dependências:

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

Memoizar uma lista filtrada/ordenada:

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

Memoizar uma árvore de componentes (raro):

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

Notas de TypeScript

// O tipo de retorno é inferido da fábrica
const total = useMemo(() => items.reduce((sum, i) => sum + i.price, 0), [items]);
// total: number
 
// Genérico explícito quando a inferência é muito ampla
const config = useMemo<Config>(() => ({ retries: 3, timeout: 5000 }), []);

Armadilhas

• Otimização prematura - Envolver cada valor em useMemo adiciona complexidade sem benefício mensurável para cálculos baratos. Correção: Perfilar primeiro. Memoize apenas quando você puder medir um problema de desempenho.

• Dependências ausentes - Omitir uma dependência faz com que o valor memoizado fique desatualizado. Correção: Inclua todos os valores reativos usados dentro da fábrica.

• Referências de dependência instáveis - Se uma dependência for um novo objeto/array a cada renderização, useMemo recalcula de qualquer maneira a cada vez. Correção: Memoize a própria dependência ou reestruture para depender de primitivos.

• Efeitos colaterais na fábrica - useMemo é executado durante a renderização; efeitos colaterais (buscas, assinaturas) quebram as regras do React. Correção: Mova efeitos colaterais para useEffect ou manipuladores de eventos.

• Não é uma garantia - O React pode descartar valores memoizados para componentes fora da tela e recalcular mais tarde. Correção: Nunca confie em useMemo para correção - apenas para desempenho.

Alternativas

Quando vale a pena? Como regra geral, memoize quando o cálculo leva mais de ~1ms ou quando o resultado é usado como dependência para useEffect, useCallback, ou passado para um filho React.memo.

FAQs

const options = useMemo(
  () => ({ page, pageSize, sortBy }),
  [page, pageSize, sortBy]
);
 
useEffect(() => {
  fetchData(options);
}, [options]); // referência estável, o efeito só reexecuta quando os valores mudam

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

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

Relacionados

• useCallback - useMemo para funções
• useEffect - estabilize dependências com useMemo para evitar reexecutar efeitos
• useDeferredValue - adie a renderização de conteúdo caro
• useRef - armazene valores sem acionar re-renderizações