Introducción
React Compiler es una nueva herramienta de tiempo de compilación que optimiza automáticamente tu aplicación React. Funciona con JavaScript plano y comprende lasReglas de React, por lo que no necesitas reescribir ningún código para usarlo.
Aprenderás
- Qué hace React Compiler
- Cómo empezar con el compilador
- Estrategias de adopción incremental
- Depuración y resolución de problemas cuando algo sale mal
- Usando el compilador en tu biblioteca de React
¿Qué hace React Compiler?
React Compiler optimiza automáticamente tu aplicación React en tiempo de compilación. React suele ser lo suficientemente rápido sin optimización, pero a veces necesitas memorizar manualmente componentes y valores para mantener tu aplicación receptiva. Esta memorización manual es tediosa, fácil de hacer mal y añade código extra que mantener. React Compiler hace esta optimización automáticamente por ti, liberándote de esta carga mental para que puedas centrarte en construir funcionalidades.
Antes de React Compiler
Sin el compilador, necesitas memorizar manualmente componentes y valores para optimizar los re-renderizados:
Nota
Esta memorización manual tiene un error sutil que rompe la memorización:
AunquehandleClickestá envuelto enuseCallback, la función flecha() => handleClick(item)crea una nueva función cada vez que el componente se renderiza. Esto significa queItemsiempre recibirá una nueva proponClick, rompiendo la memorización.
React Compiler es capaz de optimizar esto correctamente con o sin la función flecha, asegurando queItemsolo se re-renderice cuandoprops.onClickcambie.
Después de React Compiler
Con React Compiler, escribes el mismo código sin memorización manual:
Ver este ejemplo en el Playground de React Compiler
React Compiler aplica automáticamente la memorización óptima, asegurando que tu aplicación solo se re-renderice cuando sea necesario.
¿Debería probar el compilador?
Animamos a todos a comenzar a usar React Compiler. Si bien el compilador sigue siendo una adición opcional a React hoy, en el futuro algunas características pueden requerir el compilador para funcionar completamente.
¿Es seguro de usar?
React Compiler ahora es estable y ha sido probado extensamente en producción. Si bien se ha utilizado en producción en empresas como Meta, implementar el compilador en producción para tu aplicación dependerá de la salud de tu base de código y de qué tan bien hayas seguido lasReglas de React.
¿Qué herramientas de construcción son compatibles?
React Compiler se puede instalar envarias herramientas de construccióncomo Babel, Vite, Metro y Rsbuild.
React Compiler es principalmente un envoltorio ligero de plugin de Babel alrededor del compilador central, que fue diseñado para estar desacoplado del propio Babel. Si bien la versión estable inicial del compilador seguirá siendo principalmente un plugin de Babel, estamos trabajando con los equipos de swc yoxcpara construir soporte de primera clase para React Compiler, de modo que no tengas que volver a agregar Babel a tus pipelines de construcción en el futuro.
Los usuarios de Next.js pueden habilitar el React Compiler invocado por swc usandov15.3.1y superiores.
¿Qué debo hacer con useMemo, useCallback y React.memo?
Por defecto, React Compiler memoizará tu código basándose en su análisis y heurísticas. En la mayoría de los casos, esta memoización será tan precisa, o más, que lo que puedas haber escrito.
Sin embargo, en algunos casos los desarrolladores pueden necesitar más control sobre la memoización. Los hooksuseMemo y useCallbackpueden seguir usándose con React Compiler como una vía de escape para proporcionar control sobre qué valores se memoizan. Un caso de uso común para esto es si un valor memoizado se usa como dependencia de un efecto, para garantizar que un efecto no se dispare repetidamente incluso cuando sus dependencias no cambien de manera significativa.
Para código nuevo, recomendamos confiar en el compilador para la memoización y usaruseMemo/useCallbackdonde sea necesario para lograr un control preciso.
Para código existente, recomendamos dejar la memoización existente en su lugar (eliminarla puede cambiar la salida de la compilación) o probar cuidadosamente antes de eliminar la memoización.
Prueba React Compiler
Esta sección te ayudará a comenzar con React Compiler y a comprender cómo usarlo de manera efectiva en tus proyectos.
- Instalación- Instala React Compiler y configúralo para tus herramientas de compilación
- Compatibilidad de Versiones de React- Compatibilidad con React 17, 18 y 19
- Configuración- Personaliza el compilador para tus necesidades específicas
- Adopción Incremental- Estrategias para implementar gradualmente el compilador en bases de código existentes
- Depuración y Solución de Problemas- Identifica y corrige problemas al usar el compilador
- Compilación de Bibliotecas- Mejores prácticas para distribuir código compilado
- Referencia de la API- Documentación detallada de todas las opciones de configuración
Recursos adicionales
Además de esta documentación, recomendamos consultar elGrupo de Trabajo de React Compilerpara obtener información adicional y participar en discusiones sobre el compilador.