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

React.memo Memoização de Componente

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

React.memo Memoização de Componente

Envolver um componente em React.memo permite que ele pule uma re-renderização quando suas props permanecem iguais em uma comparação rasa, reutilizando a saída anterior como está. Serve a componentes filhos caros de renderizar e que recebem props estáveis, e o benefício é maior quando o pai se atualiza com frequência, por exemplo ao digitar ou mover o mouse. Como a comparação é rasa, um objeto ou função novo nas props derrota o cache, então memo geralmente precisa ser combinado com useMemo ou useCallback.

GrupoEfeitos e Desempenho
TipoAPI
DesdeReact 16.6

ℹ️ 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 MemoList = memo(function List({ items, onSelect }) {
  return items.map(it => <Row key={it.id} item={it} onSelect={onSelect} />)
})
// equal props after a shallow comparison mean the render is skipped
// the second argument can customize the comparison: memo(Cmp, (prev, next) => equal)

⚙️ Parâmetros

ComponentO componente a envolver, geralmente um componente de apresentação caro de renderizar.
areEqual (optional)Uma função de comparação personalizada (prevProps, nextProps) => boolean; retornar true significa que as props são iguais e a renderização é pulada.

Retorna：Retorna uma cópia memoizada do componente, usada exatamente como a original.

▶ Exemplo

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

Saída：

Clicar no botão repetidamente só atualiza o texto do contador e o console para de imprimir "The list rendered" — a referência de items nunca muda, então memo faz toda a lista pular a re-renderização.
▶ Experimente

💡 Pontos-chave

💡 Dica memo só realiza uma comparação rasa de props: uma função ou objeto criado a cada renderização quebra o cache, então combine-o com useCallback ou useMemo.
ℹ️ Informação Um componente que recebe children geralmente é um mau candidato a memo — children é uma nova referência de elemento a cada renderização.
⚠️ Aviso Não envolva todo componente em memo sem pensar: o invólucro também tem um custo de comparação, então encontre os pontos quentes reais com o Profiler do DevTools primeiro.
usememo usecallback memo-when-not list-rendering
Mais casos em breve.

📚 Tutoriais Relacionados

useMemo e useCallback
Lição 11: a combinação de memo e useCallback.

❓ Perguntas Frequentes

P Qual é a diferença entre memo e useMemo?
R memo é um componente de ordem superior que cacheia a saída de renderização de um componente, enquanto useMemo é um hook que cacheia um valor computado.
P Por que um componente memoizado ainda renderiza de novo?
R Muito provavelmente as props contêm um objeto, array ou função criado a cada renderização, então a comparação rasa nunca é igual — estabilize as referências com useMemo ou useCallback.
P Como escrevo o segundo argumento areEqual?
R Ele recebe (prev, next) e retorna true quando contam como iguais para que a renderização possa ser pulada; use-o apenas quando a comparação rasa realmente não serve, como comparar um campo profundamente aninhado.
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%