Depuración y Resolución de Problemas

Esta guía te ayuda a identificar y solucionar problemas al usar React Compiler. Aprende a depurar problemas de compilación y resolver incidencias comunes.

Comprender el Comportamiento del Compilador

React Compiler está diseñado para manejar código que sigue lasReglas de React. Cuando encuentra código que podría romper estas reglas, omite la optimización de forma segura en lugar de arriesgarse a cambiar el comportamiento de tu aplicación.

Errores del Compilador vs Problemas en Tiempo de Ejecución

Errores del compiladorocurren en tiempo de compilación y evitan que tu código se compile. Son raros porque el compilador está diseñado para omitir código problemático en lugar de fallar.

Problemas en tiempo de ejecuciónocurren cuando el código compilado se comporta de manera diferente a lo esperado. La mayoría de las veces, si encuentras un problema con React Compiler, es un problema en tiempo de ejecución. Esto suele suceder cuando tu código viola las Reglas de React de formas sutiles que el compilador no pudo detectar, y el compilador compiló por error un componente que debería haber omitido.

Al depurar problemas en tiempo de ejecución, enfoca tus esfuerzos en encontrar violaciones de las Reglas de React en los componentes afectados que no fueron detectadas por la regla de ESLint. El compilador depende de que tu código siga estas reglas, y cuando se rompen de formas que no puede detectar, es cuando ocurren los problemas en tiempo de ejecución.

Patrones Comunes que Rompen la Compilación

Una de las principales formas en que React Compiler puede romper tu aplicación es si tu código fue escrito para depender de la memorización para su correcto funcionamiento. Esto significa que tu aplicación depende de que valores específicos estén memorizados para funcionar correctamente. Dado que el compilador puede memorizar de manera diferente a tu enfoque manual, esto puede llevar a comportamientos inesperados como efectos que se disparan en exceso, bucles infinitos o actualizaciones faltantes.

Escenarios comunes donde esto ocurre:

• Efectos que dependen de la igualdad referencial- Cuando los efectos dependen de que objetos o arrays mantengan la misma referencia entre renderizados
• Arrays de dependencias que necesitan referencias estables- Cuando dependencias inestables hacen que los efectos se disparen con demasiada frecuencia o creen bucles infinitos
• Lógica condicional basada en comprobaciones de referencia- Cuando el código usa comprobaciones de igualdad referencial para almacenamiento en caché u optimización

Flujo de Trabajo de Depuración

Sigue estos pasos cuando encuentres problemas:

Errores de Compilación del Compilador

Si encuentras un error del compilador que rompe inesperadamente tu compilación, es probable que sea un error en el compilador. Repórtalo en el repositoriofacebook/react con:

• El mensaje de error
• El código que causó el error
• Tus versiones de React y del compilador

Problemas en Tiempo de Ejecución

Para problemas de comportamiento en tiempo de ejecución:

1. Deshabilitar Temporalmente la Compilación

Usa"use no memo"para aislar si un problema está relacionado con el compilador:

Si el problema desaparece, es probable que esté relacionado con una violación de las Reglas de React.

También puedes intentar eliminar la memorización manual (useMemo, useCallback, memo) del componente problemático para verificar que tu aplicación funciona correctamente sin ninguna memorización. Si el error aún ocurre cuando se elimina toda la memorización, tienes una violación de las Reglas de React que debe corregirse.

2. Corregir Problemas Paso a Paso

1. Identificar la causa raíz (a menudo memorización-para-correcto-funcionamiento)
2. Probar después de cada corrección
3. Eliminar"use no memo"una vez corregido
4. Verificar que el componente muestre la insignia ✨ en React DevTools

Reportar Errores del Compilador

Si crees que has encontrado un error del compilador:

1. Verificar que no sea una violación de las Reglas de React- Comprobar con ESLint
2. Crear una reproducción mínima- Aislar el problema en un ejemplo pequeño
3. Probar sin el compilador- Confirmar que el problema solo ocurre con la compilación
4. Reportar unissue:
   • Versiones de React y del compilador
   • Código de reproducción mínima
   • Comportamiento esperado vs. real
   • Cualquier mensaje de error

Próximos pasos

• Revisar lasReglas de Reactpara prevenir problemas
• Consultar laguía de adopción incrementalpara estrategias de implementación gradual