You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`"use memo"`marks a function for React Compiler optimization.
8
+
`"use memo"`marca uma função para otimização pelo React Compiler.
9
9
10
10
</Intro>
11
11
12
12
<Note>
13
13
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"`.
15
15
16
16
</Note>
17
17
18
18
<InlineToc />
19
19
20
20
---
21
21
22
-
## Reference {/*reference*/}
22
+
## Referência {/*reference*/}
23
23
24
24
### `"use memo"` {/*use-memo*/}
25
25
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.
27
27
28
28
```js {1}
29
29
functionMyComponent() {
@@ -32,59 +32,59 @@ function MyComponent() {
32
32
}
33
33
```
34
34
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.
36
36
37
-
#### Caveats {/*caveats*/}
37
+
#### Ressalvas {/*caveats*/}
38
38
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).
44
44
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*/}
46
46
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.
48
48
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:
50
50
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.
54
54
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.
56
56
57
-
### When to use`"use memo"` {/*when-to-use*/}
57
+
### Quando usar`"use memo"` {/*when-to-use*/}
58
58
59
-
You should consider using`"use memo"`when:
59
+
Você deve considerar usar`"use memo"`quando:
60
60
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:
//Automatically memoized because this is named like a Component
129
+
//Automaticamente memorizado porque este é nomeado como um Componente
130
130
functionComplexDashboard({ data }) {
131
131
// ...
132
132
}
133
133
134
-
//Skipped: Is not named like a Component
134
+
//Ignorado: Não é nomeado como um Componente
135
135
functionsimpleDisplay({ text }) {
136
136
// ...
137
137
}
138
138
```
139
139
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"`.
0 commit comments