|
1 | 1 | --- |
2 | | -title: Debugging and Troubleshooting |
| 2 | +title: Depuração e Solução de Problemas |
3 | 3 | --- |
4 | 4 |
|
5 | 5 | <Intro> |
6 | | -This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues. |
| 6 | +Este guia ajuda você a identificar e corrigir problemas ao usar o React Compiler. Aprenda como depurar problemas de compilação e resolver questões comuns. |
7 | 7 | </Intro> |
8 | 8 |
|
9 | 9 | <YouWillLearn> |
10 | 10 |
|
11 | | -* The difference between compiler errors and runtime issues |
12 | | -* Common patterns that break compilation |
13 | | -* Step-by-step debugging workflow |
| 11 | +* A diferença entre erros do compilador e problemas em tempo de execução |
| 12 | +* Padrões comuns que quebram a compilação |
| 13 | +* Fluxo de trabalho de depuração passo a passo |
14 | 14 |
|
15 | 15 | </YouWillLearn> |
16 | 16 |
|
17 | | -## Understanding Compiler Behavior {/*understanding-compiler-behavior*/} |
| 17 | +## Entendendo o Comportamento do Compilador {/*understanding-compiler-behavior*/} |
18 | 18 |
|
19 | | -React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior. |
| 19 | +O React Compiler é projetado para lidar com código que segue as [Regras do React](/reference/rules). Quando encontra código que pode quebrar essas regras, ele ignora com segurança a otimização em vez de arriscar alterar o comportamento do seu app. |
20 | 20 |
|
21 | | -### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/} |
| 21 | +### Erros do Compilador vs Problemas em Tempo de Execução {/*compiler-errors-vs-runtime-issues*/} |
22 | 22 |
|
23 | | -**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail. |
| 23 | +**Erros do compilador** ocorrem no momento da compilação e impedem que seu código seja compilado. Estes são raros porque o compilador é projetado para ignorar código problemático em vez de falhar. |
24 | 24 |
|
25 | | -**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped. |
| 25 | +**Problemas em tempo de execução** ocorrem quando o código compilado se comporta de forma diferente do esperado. Na maioria das vezes, se você encontrar um problema com o React Compiler, é um problema em tempo de execução. Isso geralmente acontece quando seu código viola as Regras do React de maneiras sutis que o compilador não conseguiu detectar, e o compilador compilou incorretamente um componente que deveria ter ignorado. |
26 | 26 |
|
27 | | -When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur. |
| 27 | +Ao depurar problemas em tempo de execução, concentre seus esforços em encontrar violações das Regras do React nos componentes afetados que não foram detectadas pela regra do ESLint. O compilador depende do seu código seguindo essas regras, e quando elas são quebradas de maneiras que ele não consegue detectar, é quando ocorrem problemas em tempo de execução. |
28 | 28 |
|
29 | 29 |
|
30 | | -## Common Breaking Patterns {/*common-breaking-patterns*/} |
| 30 | +## Padrões Comuns que Quebram {/*common-breaking-patterns*/} |
31 | 31 |
|
32 | | -One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates. |
| 32 | +Uma das principais maneiras pelas quais o React Compiler pode quebrar seu app é se seu código foi escrito para depender de memoização para correção. Isso significa que seu app depende de valores específicos sendo memoizados para funcionar adequadamente. Como o compilador pode memoizar de forma diferente da sua abordagem manual, isso pode levar a comportamentos inesperados como efeitos disparando demais, loops infinitos ou atualizações ausentes. |
33 | 33 |
|
34 | | -Common scenarios where this occurs: |
| 34 | +Cenários comuns onde isso ocorre: |
35 | 35 |
|
36 | | -- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders |
37 | | -- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops |
38 | | -- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization |
| 36 | +- **Efeitos que dependem de igualdade referencial** - Quando efeitos dependem de objetos ou arrays mantendo a mesma referência entre renderizações |
| 37 | +- **Arrays de dependência que precisam de referências estáveis** - Quando dependências instáveis fazem efeitos dispararem com muita frequência ou criar loops infinitos |
| 38 | +- **Lógica condicional baseada em verificações de referência** - Quando código usa verificações de igualdade referencial para cache ou otimização |
39 | 39 |
|
40 | | -## Debugging Workflow {/*debugging-workflow*/} |
| 40 | +## Fluxo de Trabalho de Depuração {/*debugging-workflow*/} |
41 | 41 |
|
42 | | -Follow these steps when you encounter issues: |
| 42 | +Siga estes passos quando encontrar problemas: |
43 | 43 |
|
44 | | -### Compiler Build Errors {/*compiler-build-errors*/} |
| 44 | +### Erros de Compilação do Compilador {/*compiler-build-errors*/} |
45 | 45 |
|
46 | | -If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with: |
47 | | -- The error message |
48 | | -- The code that caused the error |
49 | | -- Your React and compiler versions |
| 46 | +Se você encontrar um erro do compilador que quebra inesperadamente sua compilação, isso provavelmente é um bug no compilador. Reporte-o para o repositório [facebook/react](https://github.com/facebook/react/issues) com: |
| 47 | +- A mensagem de erro |
| 48 | +- O código que causou o erro |
| 49 | +- Suas versões do React e do compilador |
50 | 50 |
|
51 | | -### Runtime Issues {/*runtime-issues*/} |
| 51 | +### Problemas em Tempo de Execução {/*runtime-issues*/} |
52 | 52 |
|
53 | | -For runtime behavior issues: |
| 53 | +Para problemas de comportamento em tempo de execução: |
54 | 54 |
|
55 | | -### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/} |
| 55 | +### 1. Desabilite Temporariamente a Compilação {/*temporarily-disable-compilation*/} |
56 | 56 |
|
57 | | -Use `"use no memo"` to isolate whether an issue is compiler-related: |
| 57 | +Use `"use no memo"` para isolar se um problema está relacionado ao compilador: |
58 | 58 |
|
59 | 59 | ```js |
60 | 60 | function ProblematicComponent() { |
61 | | - "use no memo"; // Skip compilation for this component |
62 | | - // ... rest of component |
| 61 | + "use no memo"; // Pula a compilação para este componente |
| 62 | + // ... resto do componente |
63 | 63 | } |
64 | 64 | ``` |
65 | 65 |
|
66 | | -If the issue disappears, it's likely related to a Rules of React violation. |
| 66 | +Se o problema desaparecer, provavelmente está relacionado a uma violação das Regras do React. |
67 | 67 |
|
68 | | -You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed. |
| 68 | +Você também pode tentar remover a memoização manual (useMemo, useCallback, memo) do componente problemático para verificar que seu app funciona corretamente sem qualquer memoização. Se o bug ainda ocorrer quando toda a memoização for removida, você tem uma violação das Regras do React que precisa ser corrigida. |
69 | 69 |
|
70 | | -### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/} |
| 70 | +### 2. Corrija Problemas Passo a Passo {/*fix-issues-step-by-step*/} |
71 | 71 |
|
72 | | -1. Identify the root cause (often memoization-for-correctness) |
73 | | -2. Test after each fix |
74 | | -3. Remove `"use no memo"` once fixed |
75 | | -4. Verify the component shows the ✨ badge in React DevTools |
| 72 | +1. Identifique a causa raiz (frequentemente memoização-para-correção) |
| 73 | +2. Teste após cada correção |
| 74 | +3. Remova `"use no memo"` uma vez corrigido |
| 75 | +4. Verifique se o componente mostra o badge ✨ no React DevTools |
76 | 76 |
|
77 | | -## Reporting Compiler Bugs {/*reporting-compiler-bugs*/} |
| 77 | +## Reportando Bugs do Compilador {/*reporting-compiler-bugs*/} |
78 | 78 |
|
79 | | -If you believe you've found a compiler bug: |
| 79 | +Se você acredita que encontrou um bug do compilador: |
80 | 80 |
|
81 | | -1. **Verify it's not a Rules of React violation** - Check with ESLint |
82 | | -2. **Create a minimal reproduction** - Isolate the issue in a small example |
83 | | -3. **Test without the compiler** - Confirm the issue only occurs with compilation |
84 | | -4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: |
85 | | - - React and compiler versions |
86 | | - - Minimal reproduction code |
87 | | - - Expected vs actual behavior |
88 | | - - Any error messages |
| 81 | +1. **Verifique se não é uma violação das Regras do React** - Verifique com o ESLint |
| 82 | +2. **Crie uma reprodução mínima** - Isole o problema em um exemplo pequeno |
| 83 | +3. **Teste sem o compilador** - Confirme que o problema só ocorre com a compilação |
| 84 | +4. **Abra uma [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: |
| 85 | + - Versões do React e do compilador |
| 86 | + - Código de reprodução mínima |
| 87 | + - Comportamento esperado vs atual |
| 88 | + - Qualquer mensagem de erro |
89 | 89 |
|
90 | | -## Next Steps {/*next-steps*/} |
| 90 | +## Próximos Passos {/*next-steps*/} |
91 | 91 |
|
92 | | -- Review the [Rules of React](/reference/rules) to prevent issues |
93 | | -- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies |
| 92 | +- Revise as [Regras do React](/reference/rules) para prevenir problemas |
| 93 | +- Verifique o [guia de adoção incremental](/learn/react-compiler/incremental-adoption) para estratégias de implementação gradual |
0 commit comments