use-memo.md

title	use memo
titleForTitleTag	'use memo' directive

"use memo" marca uma função para otimização pelo React Compiler.

Na maioria dos casos, você não precisa de "use memo". Ele é primariamente necessário no modo annotation, onde você deve marcar explicitamente as funções para otimização. No modo infer, o compilador detecta automaticamente componentes e hooks por seus padrões de nomenclatura (PascalCase para componentes, prefixo use para hooks). Se um componente ou hook não estiver sendo compilado no modo infer, você deve corrigir sua convenção de nomenclatura em vez de forçar a compilação com "use memo".

---

Referência {/reference/}

"use memo" {/use-memo/}

Adicione "use memo" no início de uma função para marcá-la para otimização pelo React Compiler.

function MyComponent() {
  "use memo";
  // ...
}

Quando uma função contém "use memo", o React Compiler a analisará e otimizará em tempo de compilação. O compilador automaticamente memorizará valores e componentes para evitar recomputações e re-renderizações desnecessárias.

Ressalvas {/caveats/}

• "use memo" deve estar no início do corpo da função, antes de quaisquer imports ou outro código (comentários são permitidos).
• A diretiva deve ser escrita com aspas duplas ou simples, não com crases.
• A diretiva deve corresponder exatamente a "use memo".
• Apenas a primeira diretiva em uma função é processada; diretivas adicionais são ignoradas.
• O efeito da diretiva depende da sua configuração de compilationMode.

Como "use memo" marca funções para otimização {/how-use-memo-marks/}

Em um aplicativo React que usa o React Compiler, as funções são analisadas em tempo de compilação para determinar se podem ser otimizadas. Por padrão, o compilador infere automaticamente quais componentes memorizar, mas isso pode depender da sua configuração de compilationMode, se você a definiu.

"use memo" marca explicitamente uma função para otimização, substituindo o comportamento padrão:

• No modo annotation: Apenas funções com "use memo" são otimizadas.
• No modo infer: O compilador usa heurísticas, mas "use memo" força a otimização.
• No modo all: Tudo é otimizado por padrão, tornando "use memo" redundante.

A diretiva cria um limite claro em sua base de código entre código otimizado e não otimizado, dando a você controle granular sobre o processo de compilação.

Quando usar "use memo" {/when-to-use/}

Você deve considerar usar "use memo" quando:

Você está usando o modo de anotação {/annotation-mode-use/}

Em compilationMode: 'annotation', a diretiva é necessária para qualquer função que você queira otimizar:

// ✅ Este componente será otimizado
function OptimizedList() {
  "use memo";
  // ...
}

// ❌ Este componente não será otimizado
function SimpleWrapper() {
  // ...
}

Você está adotando gradualmente o React Compiler {/gradual-adoption/}

Comece com o modo annotation e otimize seletivamente componentes estáveis:

// Comece otimizando componentes folha
function Button({ onClick, children }) {
  "use memo";
  // ...
}

// Gradualmente suba na árvore conforme verifica o comportamento
function ButtonGroup({ buttons }) {
  "use memo";
  // ...
}

---

Uso {/usage/}

Trabalhando com diferentes modos de compilação {/compilation-modes/}

O comportamento de "use memo" muda com base na sua configuração do compilador:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation' // ou 'infer' ou 'all'
    }]
  ]
};

Modo de anotação {/annotation-mode-example/}

// ✅ Otimizado com "use memo"
function ProductCard({ product }) {
  "use memo";
  // ...
}

// ❌ Não otimizado (sem diretiva)
function ProductList({ products }) {
  // ...
}

Modo infer (padrão) {/infer-mode-example/}

// Automaticamente memorizado porque este é nomeado como um Componente
function ComplexDashboard({ data }) {
  // ...
}

// Ignorado: Não é nomeado como um Componente
function simpleDisplay({ text }) {
  // ...
}

No modo infer, o compilador detecta automaticamente componentes e hooks por seus padrões de nomenclatura (PascalCase para componentes, prefixo use para hooks). Se um componente ou hook não estiver sendo compilado no modo infer, você deve corrigir sua convenção de nomenclatura em vez de forçar a compilação com "use memo".

---

Solução de problemas {/troubleshooting/}

Verificando a otimização {/verifying-optimization/}

Para confirmar que seu componente está sendo otimizado:

1. Verifique a saída compilada em seu build.
2. Use o React DevTools para verificar o selo ✨ Memo.

Ver também {/see-also/}

• "use no memo" - Desativar compilação
• compilationMode - Configurar comportamento de compilação
• React Compiler - Guia de introdução