Depuração e Solução de Problemas

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.

Compreendendo o Comportamento do Compilador

O React Compiler foi projetado para lidar com código que segue asRegras do React. Quando encontra código que pode quebrar essas regras, ele ignora a otimização com segurança em vez de arriscar alterar o comportamento do seu aplicativo.

Erros do Compilador vs. Problemas de Tempo de Execução

Erros do compiladorocorrem no momento da construção e impedem a compilação do seu código. Eles são raros porque o compilador foi projetado para ignorar código problemático em vez de falhar.

Problemas de tempo de execuçãoocorrem quando o código compilado se comporta de maneira diferente do esperado. Na maioria das vezes, se você encontrar um problema com o React Compiler, é um problema de 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 por engano um componente que deveria ter ignorado.

Ao depurar problemas de 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 seguir essas regras, e quando elas são quebradas de maneiras que ele não consegue detectar, é quando ocorrem problemas de tempo de execução.

Padrões Comuns de Quebra

Uma das principais maneiras pelas quais o React Compiler pode quebrar seu aplicativo é se seu código foi escrito para depender de memoização para correção. Isso significa que seu aplicativo depende de valores específicos serem memorizados para funcionar corretamente. Como o compilador pode memorizar de maneira diferente da sua abordagem manual, isso pode levar a comportamentos inesperados, como efeitos disparando excessivamente, loops infinitos ou atualizações ausentes.

Cenários comuns onde isso ocorre:

• Efeitos que dependem de igualdade referencial- Quando efeitos dependem de objetos ou arrays manterem a mesma referência entre renderizações
• Arrays de dependência que precisam de referências estáveis- Quando dependências instáveis fazem efeitos disparar com muita frequência ou criam loops infinitos
• Lógica condicional baseada em verificações de referência- Quando o código usa verificações de igualdade referencial para cache ou otimização

Fluxo de Trabalho de Depuração

Siga estas etapas quando encontrar problemas:

Erros de Compilação do Compilador

Se você encontrar um erro do compilador que quebra inesperadamente sua construção, isso provavelmente é um bug no compilador. Reporte-o no repositóriofacebook/react com:

• A mensagem de erro
• O código que causou o erro
• Suas versões do React e do compilador

Problemas de Tempo de Execução

Para problemas de comportamento em tempo de execução:

1. Desativar Temporariamente a Compilação

Use"use no memo"para isolar se um problema está relacionado ao compilador:

Se o problema desaparecer, provavelmente está relacionado a uma violação das Regras do React.

Você também pode tentar remover a memoização manual (useMemo, useCallback, memo) do componente problemático para verificar se seu aplicativo funciona corretamente sem nenhuma 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.

2. Corrigir Problemas Passo a Passo

1. Identifique a causa raiz (frequentemente memoização-para-correção)
2. Teste após cada correção
3. Remova"use no memo"uma vez corrigido
4. Verifique se o componente mostra o emblema ✨ no React DevTools

Reportando Bugs do Compilador

Se você acredita que encontrou um bug no compilador:

1. Verifique se não é uma violação das Regras do React- Verifique com o ESLint
2. Crie uma reprodução mínima- Isole o problema em um exemplo pequeno
3. Teste sem o compilador- Confirme que o problema ocorre apenas com a compilação
4. Registre umproblema:
   • Versões do React e do compilador
   • Código de reprodução mínima
   • Comportamento esperado vs. real
   • Quaisquer mensagens de erro

Próximos Passos

• Revise asRegras do Reactpara evitar problemas
• Consulte oguia de adoção incrementalpara estratégias de implantação gradual