Skip to content

Commit 752ed81

Browse files
Translate use-memo.md to Brazilian Portuguese
1 parent 630bc3f commit 752ed81

File tree

1 file changed

+49
-49
lines changed
  • src/content/reference/react-compiler/directives

1 file changed

+49
-49
lines changed
Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
---
2-
title: "use memo"
2+
title: "'use memo'"
33
titleForTitleTag: "'use memo' directive"
44
---
55

66
<Intro>
77

8-
`"use memo"` marks a function for React Compiler optimization.
8+
`"use memo"` marca uma função para otimização pelo React Compiler.
99

1010
</Intro>
1111

1212
<Note>
1313

14-
In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
14+
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"`.
1515

1616
</Note>
1717

1818
<InlineToc />
1919

2020
---
2121

22-
## Reference {/*reference*/}
22+
## Referência {/*reference*/}
2323

2424
### `"use memo"` {/*use-memo*/}
2525

26-
Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization.
26+
Adicione `"use memo"` no início de uma função para marcá-la para otimização pelo React Compiler.
2727

2828
```js {1}
2929
function MyComponent() {
@@ -32,59 +32,59 @@ function MyComponent() {
3232
}
3333
```
3434

35-
When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.
35+
Quando uma função contém `"use memo"`, o React Compiler a analisará e otimizará durante o tempo de build. O compilador automaticamente memorizará valores e componentes para prevenir recomputações e re-renderizações desnecessárias.
3636

37-
#### Caveats {/*caveats*/}
37+
#### Ressalvas {/*caveats*/}
3838

39-
* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
40-
* The directive must be written with double or single quotes, not backticks.
41-
* The directive must exactly match `"use memo"`.
42-
* Only the first directive in a function is processed; additional directives are ignored.
43-
* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting.
39+
* `"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).
40+
* A diretiva deve ser escrita com aspas duplas ou simples, não com crases.
41+
* A diretiva deve corresponder exatamente a `"use memo"`.
42+
* Apenas a primeira diretiva em uma função é processada; diretivas adicionais são ignoradas.
43+
* O efeito da diretiva depende da sua configuração de [`compilationMode`](/reference/react-compiler/compilationMode).
4444

45-
### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/}
45+
### Como `"use memo"` marca funções para otimização {/*how-use-memo-marks*/}
4646

47-
In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it.
47+
Em um aplicativo React que usa o React Compiler, as funções são analisadas no tempo de build 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`](/reference/react-compiler/compilationMode) se você a definiu.
4848

49-
`"use memo"` explicitly marks a function for optimization, overriding the default behavior:
49+
`"use memo"` marca explicitamente uma função para otimização, substituindo o comportamento padrão:
5050

51-
* In `annotation` mode: Only functions with `"use memo"` are optimized
52-
* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization
53-
* In `all` mode: Everything is optimized by default, making `"use memo"` redundant
51+
* No modo `annotation`: Apenas funções com `"use memo"` são otimizadas.
52+
* No modo `infer`: O compilador usa heurísticas, mas `"use memo"` força a otimização.
53+
* No modo `all`: Tudo é otimizado por padrão, tornando `"use memo"` redundante.
5454

55-
The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.
55+
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.
5656

57-
### When to use `"use memo"` {/*when-to-use*/}
57+
### Quando usar `"use memo"` {/*when-to-use*/}
5858

59-
You should consider using `"use memo"` when:
59+
Você deve considerar usar `"use memo"` quando:
6060

61-
#### You're using annotation mode {/*annotation-mode-use*/}
62-
In `compilationMode: 'annotation'`, the directive is required for any function you want optimized:
61+
#### Você está usando o modo de anotação {/*annotation-mode-use*/}
62+
Em `compilationMode: 'annotation'`, a diretiva é necessária para qualquer função que você queira otimizar:
6363

6464
```js
65-
//This component will be optimized
65+
//Este componente será otimizado
6666
function OptimizedList() {
6767
"use memo";
6868
// ...
6969
}
7070

71-
//This component won't be optimized
71+
//Este componente não será otimizado
7272
function SimpleWrapper() {
7373
// ...
7474
}
7575
```
7676

77-
#### You're gradually adopting React Compiler {/*gradual-adoption*/}
78-
Start with `annotation` mode and selectively optimize stable components:
77+
#### Você está adotando gradualmente o React Compiler {/*gradual-adoption*/}
78+
Comece com o modo `annotation` e otimize seletivamente componentes estáveis:
7979

8080
```js
81-
// Start by optimizing leaf components
81+
// Comece otimizando componentes folha
8282
function Button({ onClick, children }) {
8383
"use memo";
8484
// ...
8585
}
8686

87-
// Gradually move up the tree as you verify behavior
87+
// Gradualmente suba na árvore conforme verifica o comportamento
8888
function ButtonGroup({ buttons }) {
8989
"use memo";
9090
// ...
@@ -93,65 +93,65 @@ function ButtonGroup({ buttons }) {
9393

9494
---
9595

96-
## Usage {/*usage*/}
96+
## Uso {/*usage*/}
9797

98-
### Working with different compilation modes {/*compilation-modes*/}
98+
### Trabalhando com diferentes modos de compilação {/*compilation-modes*/}
9999

100-
The behavior of `"use memo"` changes based on your compiler configuration:
100+
O comportamento de `"use memo"` muda com base na sua configuração do compilador:
101101

102102
```js
103103
// babel.config.js
104104
module.exports = {
105105
plugins: [
106106
['babel-plugin-react-compiler', {
107-
compilationMode: 'annotation' // or 'infer' or 'all'
107+
compilationMode: 'annotation' // ou 'infer' ou 'all'
108108
}]
109109
]
110110
};
111111
```
112112

113-
#### Annotation mode {/*annotation-mode-example*/}
113+
#### Modo de anotação {/*annotation-mode-example*/}
114114
```js
115-
//Optimized with "use memo"
115+
//Otimizado com "use memo"
116116
function ProductCard({ product }) {
117117
"use memo";
118118
// ...
119119
}
120120

121-
//Not optimized (no directive)
121+
//Não otimizado (sem diretiva)
122122
function ProductList({ products }) {
123123
// ...
124124
}
125125
```
126126

127-
#### Infer mode (default) {/*infer-mode-example*/}
127+
#### Modo infer (padrão) {/*infer-mode-example*/}
128128
```js
129-
// Automatically memoized because this is named like a Component
129+
// Automaticamente memorizado porque este é nomeado como um Componente
130130
function ComplexDashboard({ data }) {
131131
// ...
132132
}
133133

134-
// Skipped: Is not named like a Component
134+
// Ignorado: Não é nomeado como um Componente
135135
function simpleDisplay({ text }) {
136136
// ...
137137
}
138138
```
139139

140-
In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
140+
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"`.
141141

142142
---
143143

144-
## Troubleshooting {/*troubleshooting*/}
144+
## Solução de problemas {/*troubleshooting*/}
145145

146-
### Verifying optimization {/*verifying-optimization*/}
146+
### Verificando a otimização {/*verifying-optimization*/}
147147

148-
To confirm your component is being optimized:
148+
Para confirmar que seu componente está sendo otimizado:
149149

150-
1. Check the compiled output in your build
151-
2. Use React DevTools to check for Memo ✨ badge
150+
1. Verifique a saída compilada em seu build.
151+
2. Use o React DevTools para procurar o selo Memo ✨.
152152

153-
### See also {/*see-also*/}
153+
### Ver também {/*see-also*/}
154154

155-
* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation
156-
* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior
157-
* [React Compiler](/learn/react-compiler) - Getting started guide
155+
* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Desativar compilação
156+
* [`compilationMode`](/reference/react-compiler/compilationMode) - Configurar comportamento de compilação
157+
* [React Compiler](/learn/react-compiler) - Guia de introdução

0 commit comments

Comments
 (0)