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
React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
6
+
O React Compiler pode ser adotado incrementalmente, permitindo que você o teste em partes específicas do seu código primeiro. Este guia mostra como implementar gradualmente o compilador em projetos existentes.
7
7
</Intro>
8
8
9
9
<YouWillLearn>
10
10
11
-
*Why incremental adoption is recommended
12
-
*Using Babel overrides for directory-based adoption
13
-
*Using the "use memo" directive for opt-in compilation
14
-
*Using the "use no memo" directive to exclude components
15
-
*Runtime feature flags with gating
16
-
*Monitoring your adoption progress
11
+
*Por que a adoção incremental é recomendada
12
+
*Usando overrides do Babel para adoção baseada em diretório
13
+
*Usando a diretiva "use memo" para compilação opt-in
14
+
*Usando a diretiva "use no memo" para excluir componentes
## Por que Adoção Incremental? {/*why-incremental-adoption*/}
21
21
22
-
React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
22
+
O React Compiler é projetado para otimizar automaticamente todo o seu código, mas você não precisa adotá-lo de uma vez. A adoção incremental dá a você controle sobre o processo de implementação, permitindo que você teste o compilador em pequenas partes do seu app antes de expandir para o resto.
23
23
24
-
Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
24
+
Começar pequeno ajuda você a construir confiança nas otimizações do compilador. Você pode verificar que seu app se comporta corretamente com código compilado, medir melhorias de performance e identificar casos extremos específicos do seu código. Esta abordagem é especialmente valiosa para aplicações em produção onde a estabilidade é crítica.
25
25
26
-
Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
26
+
A adoção incremental também facilita a correção de violações das Regras do React que o compilador pode encontrar. Em vez de corrigir violações em todo o seu código de uma vez, você pode abordá-las sistematicamente conforme expande a cobertura do compilador. Isso mantém a migração gerenciável e reduz o risco de introduzir bugs.
27
27
28
-
By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
28
+
Ao controlar quais partes do seu código são compiladas, você também pode executar testes A/B para medir o impacto real das otimizações do compilador. Esses dados ajudam você a tomar decisões informadas sobre a adoção completa e demonstram o valor para sua equipe.
29
29
30
-
## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
30
+
## Abordagens para Adoção Incremental {/*approaches-to-incremental-adoption*/}
31
31
32
-
There are three main approaches to adopt React Compiler incrementally:
32
+
Existem três abordagens principais para adotar o React Compiler incrementalmente:
33
33
34
-
1.**Babel overrides** - Apply the compiler to specific directories
35
-
2.**Opt-in with "use memo"** - Only compile components that explicitly opt in
36
-
3.**Runtime gating** - Control compilation with feature flags
34
+
1.**Overrides do Babel** - Aplicar o compilador a diretórios específicos
35
+
2.**Opt-in com "use memo"** - Apenas compilar componentes que explicitamente optam por participar
36
+
3.**Gating em tempo de execução** - Controlar compilação com flags de recurso
37
37
38
-
All approaches allow you to test the compiler on specific parts of your application before full rollout.
38
+
Todas as abordagens permitem que você teste o compilador em partes específicas da sua aplicação antes da implementação completa.
39
39
40
-
## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
40
+
## Adoção Baseada em Diretório com Overrides do Babel {/*directory-based-adoption*/}
41
41
42
-
Babel's `overrides`option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
42
+
A opção `overrides`do Babel permite que você aplique plugins diferentes a diferentes partes do seu código. Isso é ideal para adotar gradualmente o React Compiler diretório por diretório.
43
43
44
-
### Basic Configuration {/*basic-configuration*/}
44
+
### Configuração Básica {/*basic-configuration*/}
45
45
46
-
Start by applying the compiler to a specific directory:
46
+
Comece aplicando o compilador a um diretório específico:
47
47
48
48
```js
49
49
// babel.config.js
50
50
module.exports= {
51
51
plugins: [
52
-
//Global plugins that apply to all files
52
+
//Plugins globais que se aplicam a todos os arquivos
53
53
],
54
54
overrides: [
55
55
{
@@ -62,15 +62,15 @@ module.exports = {
62
62
};
63
63
```
64
64
65
-
### Expanding Coverage {/*expanding-coverage*/}
65
+
### Expandindo a Cobertura {/*expanding-coverage*/}
66
66
67
-
As you gain confidence, add more directories:
67
+
Conforme você ganha confiança, adicione mais diretórios:
68
68
69
69
```js
70
70
// babel.config.js
71
71
module.exports= {
72
72
plugins: [
73
-
//Global plugins
73
+
//Plugins globais
74
74
],
75
75
overrides: [
76
76
{
@@ -82,16 +82,16 @@ module.exports = {
82
82
{
83
83
test:'./src/legacy/**/*.{js,jsx,ts,tsx}',
84
84
plugins: [
85
-
//Different plugins for legacy code
85
+
//Plugins diferentes para código legado
86
86
]
87
87
}
88
88
]
89
89
};
90
90
```
91
91
92
-
### With Compiler Options {/*with-compiler-options*/}
92
+
### Com Opções do Compilador {/*with-compiler-options*/}
93
93
94
-
You can also configure compiler options per override:
94
+
Você também pode configurar opções do compilador por override:
95
95
96
96
```js
97
97
// babel.config.js
@@ -102,15 +102,15 @@ module.exports = {
102
102
test:'./src/experimental/**/*.{js,jsx,ts,tsx}',
103
103
plugins: [
104
104
['babel-plugin-react-compiler', {
105
-
//options ...
105
+
//opções ...
106
106
}]
107
107
]
108
108
},
109
109
{
110
110
test:'./src/production/**/*.{js,jsx,ts,tsx}',
111
111
plugins: [
112
112
['babel-plugin-react-compiler', {
113
-
//options ...
113
+
//opções ...
114
114
}]
115
115
]
116
116
}
@@ -119,15 +119,15 @@ module.exports = {
119
119
```
120
120
121
121
122
-
## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
122
+
## Modo Opt-in com "use memo" {/*opt-in-mode-with-use-memo*/}
123
123
124
-
For maximum control, you can use`compilationMode: 'annotation'`to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
124
+
Para controle máximo, você pode usar`compilationMode: 'annotation'`para apenas compilar componentes e hooks que explicitamente optam por participar com a diretiva `"use memo"`.
125
125
126
126
<Note>
127
-
This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
127
+
Esta abordagem dá a você controle refinado sobre componentes e hooks individuais. É útil quando você quer testar o compilador em componentes específicos sem afetar diretórios inteiros.
### Configuração do Modo Annotation {/*annotation-mode-configuration*/}
131
131
132
132
```js
133
133
// babel.config.js
@@ -140,13 +140,13 @@ module.exports = {
140
140
};
141
141
```
142
142
143
-
### Using the Directive {/*using-the-directive*/}
143
+
### Usando a Diretiva {/*using-the-directive*/}
144
144
145
-
Add`"use memo"`at the beginning of functions you want to compile:
145
+
Adicione`"use memo"`no início das funções que você quer compilar:
146
146
147
147
```js
148
148
functionTodoList({ todos }) {
149
-
"use memo"; //Opt this component into compilation
149
+
"use memo"; //Opta este componente para compilação
150
150
151
151
constsortedTodos=todos.slice().sort();
152
152
@@ -160,28 +160,28 @@ function TodoList({ todos }) {
160
160
}
161
161
162
162
functionuseSortedData(data) {
163
-
"use memo"; //Opt this hook into compilation
163
+
"use memo"; //Opta este hook para compilação
164
164
165
165
returndata.slice().sort();
166
166
}
167
167
```
168
168
169
-
With`compilationMode: 'annotation'`, you must:
170
-
-Add`"use memo"`to every component you want optimized
171
-
-Add`"use memo"`to every custom hook
172
-
-Remember to add it to new components
169
+
Com`compilationMode: 'annotation'`, você deve:
170
+
-Adicionar`"use memo"`a cada componente que você quer otimizado
171
+
-Adicionar`"use memo"`a cada hook customizado
172
+
-Lembrar de adicioná-lo a novos componentes
173
173
174
-
This gives you precise control over which components are compiled while you evaluate the compiler's impact.
174
+
Isso dá a você controle preciso sobre quais componentes são compilados enquanto você avalia o impacto do compilador.
175
175
176
-
## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
176
+
## Flags de Recurso em Tempo de Execução com Gating {/*runtime-feature-flags-with-gating*/}
177
177
178
-
The `gating`option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
178
+
A opção `gating`permite que você controle a compilação em tempo de execução usando flags de recurso. Isso é útil para executar testes A/B ou implementar gradualmente o compilador baseado em segmentos de usuário.
179
179
180
-
### How Gating Works {/*how-gating-works*/}
180
+
### Como o Gating Funciona {/*how-gating-works*/}
181
181
182
-
The compiler wraps optimized code in a runtime check. If the gate returns`true`, the optimized version runs. Otherwise, the original code runs.
182
+
O compilador envolve código otimizado em uma verificação em tempo de execução. Se o gate retorna`true`, a versão otimizada executa. Caso contrário, o código original executa.
0 commit comments