English 中文 العربية 日本語 Português

useMemo Computação Memoizada

Última atualização: 2026-11-03

useMemo Computação Memoizada

useMemo armazena em cache o resultado de uma computação: enquanto as dependências se mantêm iguais, ele retorna o resultado anterior e pula a filtragem, ordenação ou mapeamento caros, e também mantém a referência de um objeto ou array estável, o que se combina com um array de dependências e com componentes filhos memoizados. É uma ferramenta de desempenho, não uma garantia semântica: o React é livre para descartar o cache, então o resultado deve permanecer correto mesmo quando o memo é recalculado do zero.

GrupoEfeitos e Desempenho
TipoHook
DesdeReact 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const result = useMemo(() => {
  return computeHeavy(list, keyword)   // the expensive computation
}, [list, keyword])                    // no recomputation while the deps stay the same

⚙️ Parâmetros

factoryUma função sem argumentos que retorna o valor a ser cacheado. Só roda de novo quando as dependências mudam.
depsO array de dependências: qualquer mudança recomputa o valor; um array vazio o calcula apenas na montagem.

Retorna：Retorna o resultado em cache da factory; enquanto as dependências não mudam, retorna a mesma referência da última vez.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Digitar uma palavra-chave filtra a lista em tempo real; clicar em "Toggle theme" apenas troca a cor de fundo e não filtra de novo (o cache do useMemo está fazendo seu trabalho).
▶ Experimente

💡 Pontos-chave

💡 Dica Dois usos principais: cachear computações caras e manter referências estáveis. Este último é a precondição para o par "dependência de objeto + filho memoizado" se sustentar.
⚠️ Aviso Envolver uma computação trivial como somar dois números em useMemo deixa as coisas mais lentas e difíceis de ler — meça a lentidão primeiro, depois otimize.
ℹ️ Informação O cache pode ser descartado pelo React (por exemplo, quando um componente fora da tela remonta), então não trate useMemo como uma garantia de que o valor fica em cache.
usecallback react-memo memo-when-not list-transform
Mais casos em breve.

📚 Tutoriais Relacionados

useMemo e useCallback
Lição 11: os dois usos da memoização e os cenários onde ela falha.

❓ Perguntas Frequentes

P Qual é a diferença entre useMemo e useCallback?
R useMemo cacheia um valor computado, useCallback cacheia uma referência de função; este último é equivalente a useMemo(() => fn, deps).
P Um array de dependências vazio é seguro?
R Só quando a factory não lê nenhum valor reativo de fora; ler state ou props sem listá-los produz um resultado obsoleto.
P Envolver toda computação em useMemo deixa as coisas mais rápidas?
R Não. Cachear tem custos de memória e de comparação, então memoizar computações simples é uma pessimização — use-o apenas para pontos quentes reais.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%