¿Cómo migrar a React 18?

React 18  evoluciona el popular marco de componentes de JavaScript con nuevas funciones basadas en la representación y pausa simultáneas. Promete un mejor rendimiento, más funciones y una experiencia de desarrollador mejorada para las aplicaciones que hacen la transición.

En este artículo, le mostraremos cómo actualizar las bases de código existentes a React 18. Tenga en cuenta que esta guía es solo una descripción general de los cambios más aplicables. La migración debería ser bastante sencilla para proyectos pequeños que ya siguen las mejores prácticas de React; grandes conjuntos de componentes complejos pueden causar algunos problemas, que detallaremos a continuación.

Instalación de Reaccionar 18

Antes de hacer cualquier otra cosa, use npm para actualizar la dependencia de React de su proyecto a la versión 18:

$ npm install react@latest react-dom@latest

La nueva versión técnicamente no es retrocompatible. Las nuevas funciones se activan mediante suscripción. Como aún no ha cambiado el código, debería poder ejecutar su aplicación y ver que se muestra correctamente. Su proyecto funcionará con el comportamiento existente de React 17.

$ npm start

Habilitación de las características de React 18: nueva API raíz

El uso de React 18 sin ningún cambio en el código base causará un efecto secundario: verá una advertencia en la consola del navegador cada vez que su aplicación se monte en modo de desarrollo.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Este mensaje de obsolescencia se puede ignorar de forma segura a menos que esté listo para actualizar su proyecto. Si desea utilizar las funciones de React 18, debe realizar el cambio que se describe en él. La ReactDOM.render()función anterior ha sido reemplazada por una nueva API raíz que está más orientada a objetos. Además de mejorar la facilidad de uso, también activa el sistema de renderizado paralelo, que admite todas las características nuevas del título.

En su archivo index.jso app.jsbusque líneas similares a estas:

Este es un punto de entrada típico para una aplicación React. Representa una instancia del Appcomponente importado como el elemento raíz de su aplicación. El contenido renderizado se almacena como innerHTMLun elemento HTML con una extensión id="react".

Para cambiar a la API raíz de React 18, reemplace el código anterior con lo siguiente:

El efecto es similar a la antigua ReactDOM.render()API. En lugar de inicializar el elemento raíz y renderizar su aplicación como una única operación imperativa, React 18 lo obliga a crear primero el objeto raíz y luego renderizar su contenido explícitamente.

Luego busque los lugares en el código donde desmontará el nodo raíz. Navegue ReactDOM.unmountComponentAtNode()a un nuevo unmount()método en su objeto raíz:

Reemplazo de devoluciones de llamada de procesamiento

ReactDOM.render()El argumento de devolución de llamada del método opcional no tiene una contrapartida directa en la API raíz de React 18. Anteriormente, podía usar este código para iniciar sesión Rendered!en la consola después de que React terminara de renderizar el nodo raíz:

Esta función se eliminó porque el tiempo de devolución de llamada es impredecible cuando se usan las nuevas funciones de hidratación parcial y renderizado subproceso del servidor React 18. Si ya está usando devoluciones de llamada de renderizado y necesita mantener la compatibilidad, puede lograr un comportamiento similar usando el mecanismo de enlace:

React llama a las referencias de función al montar componentes. Establecer una referencia al componente que es su nodo raíz le permite determinar cuándo se produce el procesamiento, proporcionando un efecto similar al antiguo sistema de devolución de llamada de procesamiento.

Problemas de actualización de depuración

Su aplicación ahora debería renderizarse usando las características de React 18 y sin ninguna advertencia de consola. Pruebe minuciosamente su aplicación para asegurarse de que todo funcione como espera. Si encuentra problemas, puede solucionarlos con estas soluciones generales.

Comprobar <modo estricto>

Las aplicaciones envueltas en componentes <StrictMode>pueden comportarse de manera diferente cuando se representan en el modo de diseño de React 18. Esto se debe a que el modo estricto ahora verifica si su base de código admite el estado reutilizable , un concepto que se introducirá por completo en React en una versión futura.

El estado reutilizable le permite a React volver a cablear un componente previamente eliminado, restaurando automáticamente su último estado. Esto requiere que sus componentes sean resistentes a los efectos de doble llamada. El modo estricto ahora lo ayuda a prepararse para la reutilización al simular el montaje, desmontaje y montaje de sus componentes cada vez que se usan, identificando cualquier problema en el que no se pueda restaurar el estado anterior. Puede deshabilitar el modo estricto si encuentra problemas en su aplicación o sus dependencias que no está preparado para abordar.

Soporte de actualización de estado por lotes

React 18 cambia la forma en que se «empaquetan» las actualizaciones de estado para mejorar el rendimiento. Cuando cambia los valores de estado varias veces en una función, React intenta fusionarlos en una nueva representación:

Este mecanismo mejora la eficiencia, pero anteriormente solo funcionaba dentro de los controladores de eventos de React. En React 18, funciona en todas las actualizaciones de estado, incluso si provienen de controladores de eventos nativos, tiempos de espera o promesas. Es posible que parte del código se comporte de manera diferente que antes si realiza actualizaciones de estado secuenciales en cualquiera de estos lugares.

Puede deshabilitar este comportamiento en situaciones en las que no esté listo para refactorizar su código. Envuelva las actualizaciones de estado flushSync()para forzarlas a comprometerse de inmediato:

Dejar de usar funciones eliminadas y no compatibles

Una vez que se tengan en cuenta todos los aspectos anteriores, su aplicación debería ser totalmente compatible con React 18. Si bien todavía hay algunos cambios en la superficie de la API , no deberían afectar a la mayoría de las aplicaciones. Estos son algunos de ellos a tener en cuenta:

• unstable_changedBitsse ha eliminado: esta API no admitida permitía excluir las actualizaciones contextuales. Ya no está disponible.
• Object.assign()Se eliminó el polyfill; debe agregar manualmente object-assignel paquete polyfill si necesita admitir navegadores muy antiguos sin un archivo Object.assign().
• Internet Explorer ya no es compatible: React eliminó oficialmente la compatibilidad con Internet Explorer hasta el final del soporte para el navegador en junio. No debe actualizar a React 18 si aún necesita que su aplicación funcione en IE.
• El uso de suspender con undefinedrespaldo ahora es equivalente a los nulllímites de suspensión previamente omitidos fallback={undefined}, lo que permite que el código se transmita en cascada al siguiente límite principal en el árbol. React 18 ahora respeta los componentes de suspenso sin respaldo.

Representación del lado del servidor

Las aplicaciones que utilizan la representación del lado del servidor requerirán algunos cambios más para funcionar con React 18.

De acuerdo con la nueva API raíz, debe reemplazar la hydrate()función anterior en el código del lado del cliente con la nueva hydrateRoot()proporcionada por el react-dom/clientpaquete:

En su código del lado del servidor, reemplace las llamadas API de representación heredadas con sus contrapartes más nuevas. En la mayoría de los casos, debe cambiar renderToNodeStream()a uno nuevo renderToReadableStream(). Las nuevas API de transmisión exponen las capacidades de procesamiento del servidor de transmisión de React 18, donde el servidor puede continuar entregando HTML nuevo al navegador después de que su aplicación se haya procesado inicialmente.

Comience a usar las funciones de React 18

Ahora que ha actualizado, puede comenzar a hacer que su aplicación sea más poderosa al incorporar las funciones de React 18. El uso de concurrencia de React significa que la representación de componentes puede interrumpirse, lo que abre nuevas posibilidades e interfaces de usuario más receptivas.

Algunas de las características añadidas incluyen importantes actualizaciones de Suspense, una forma de priorizar las actualizaciones de estado mediante Transiciones y un mecanismo integrado para acelerar las re-renderizaciones causadas por actualizaciones no urgentes pero frecuentes. También hay algunos cambios y mejoras diversos: puede regresar undefineddesde un método de componente, se eliminórender() la advertencia sobre llamar setState()a componentes no conectados y algunos atributos HTML nuevos como , y son reconocidos por el renderizador React DOM.imageSizesimageSrcSetaria-description

Resumen

React 18 es estable y está listo para funcionar. En la mayoría de los casos, el proceso de actualización debería ser rápido y fácil, y solo requiere una actualización de npm y un cambio a la nueva API raíz. Sin embargo, aún debe probar todos sus componentes: pueden comportarse de manera diferente en algunas situaciones, como en modo estricto o cuando se aplica el empaquetado automático.

Esta nueva versión apunta a la dirección futura de React como un marco de trabajo de alto rendimiento para todo tipo de aplicaciones web. También amplía las capacidades de renderizado del lado del servidor de React al agregar una pausa del lado del servidor y la capacidad de continuar transmitiendo contenido a sus usuarios después del renderizado inicial. Esto brinda a los desarrolladores más flexibilidad para distribuir el renderizado tanto en el cliente como en el servidor.