¡R.E.A.C.T: A.C.T.U.A.L.I.Z.A.C.I.Ó.N!

Han pasado 288 días, o nueve meses y doce días, desde la última entrada publicada en el blog de React hasta el quince de febrero de 2024. Este React Labs apunta a características esperadas en la nueva versión de la librería (o framework, como quieras) más popular.

Traducido de la entrada del blog de React de Joseph Savona, Ricky Hanlon, Andrew Clark, Matt Carroll y Dan Abramov.

En las publicaciones de React Labs, escribimos sobre proyectos en investigación y desarrollo activo. Hemos hecho un progreso significativo desde nuestra última actualización y nos gustaría compartir nuestro avance.

📝 Nota ¡React Conf 2024 está programado para el 15 y 16 de mayo en Henderson, Nevada! Si estás interesado en asistir a React Conf en persona, puedes inscribirte en la lotería de boletos hasta el 28 de febrero.

Para obtener más información sobre boletos, transmisión gratuita, patrocinio y más, consulta el sitio web de React Conf.

Compilador de React

El Compilador de React ya no es un proyecto de investigación: el compilador ahora alimenta instagram.com en producción, y estamos trabajando para implementar el compilador en superficies adicionales en Meta y preparar la primera versión de código abierto.

Como se discutió en nuestra publicación anterior, React a veces puede volver a renderizar demasiado cuando cambia el estado. Desde los primeros días de React, nuestra solución para tales casos ha sido la memorización manual. En nuestras API actuales, esto significa aplicar las API useMemo, useCallback y memo para ajustar manualmente cuánto React vuelve a renderizar en los cambios de estado. Pero la memorización manual es un compromiso. Ensucia nuestro código, es fácil equivocarse y requiere trabajo adicional para mantenerlo actualizado.

La memorización manual es un compromiso razonable, pero no estábamos satisfechos. Nuestra visión es que React vuelva a renderizar automáticamente solo las partes correctas de la interfaz de usuario cuando cambie el estado, sin comprometer el modelo mental básico de React. Creemos que el enfoque de React, UI como una función simple del estado, con valores y modismos JavaScript estándar, es una parte clave de por qué React ha sido accesible para tantos desarrolladores. Por eso hemos invertido en construir un compilador optimizador para React.

JavaScript es un lenguaje conocido por ser desafiante de optimizar, gracias a sus reglas laxas y naturaleza dinámica. El Compilador de React es capaz de compilar código de manera segura modelando tanto las reglas de JavaScript como las “reglas de React”. Por ejemplo, los componentes de React deben ser idempotentes, devolver el mismo valor dado los mismos datos de entrada, y no pueden mutar props o valores de estado. Estas reglas limitan lo que los desarrolladores pueden hacer y ayudan a crear un espacio seguro para que el compilador optimice.

Por supuesto, entendemos que a veces los desarrolladores flexibilizan un poco las reglas, y nuestro objetivo es hacer que el Compilador de React funcione de manera predeterminada en la mayor cantidad de código posible. El compilador intenta detectar cuándo el código no sigue estrictamente las reglas de React y compilará el código de manera segura o omitirá la compilación si no es seguro. Estamos probando en la amplia y variada base de código de Meta para validar este enfoque.

Para los desarrolladores que estén interesados en asegurarse de que su código siga las reglas de React, recomendamos habilitar el Strict Mode y configurar el complemento ESLint de React. Estas herramientas pueden ayudar a detectar errores sutiles en tu código de React, mejorando la calidad de tus aplicaciones hoy y futurizando tus aplicaciones para las próximas características como el Compilador de React. También estamos trabajando en documentación consolidada de las reglas de React y actualizaciones de nuestro complemento ESLint para ayudar a los equipos a entender y aplicar estas reglas para crear aplicaciones más robustas.

Para ver el compilador en acción, puedes ver nuestra charla del otoño pasado. En ese momento, teníamos datos experimentales iniciales de probar el Compilador de React en una página de instagram.com. Desde entonces, implementamos el compilador en producción en todo instagram.com. También hemos expandido nuestro equipo para acelerar la implementación en superficies adicionales en Meta y para código abierto. Estamos entusiasmados con el camino por delante y tendremos más para compartir en los próximos meses.

Acciones

Anteriormente compartimos que estábamos explorando soluciones para enviar datos del cliente al servidor con Acciones del Servidor, para que puedas ejecutar mutaciones de base de datos e implementar formularios. Durante el desarrollo de Acciones del Servidor, extendimos estas API para admitir el manejo de datos en aplicaciones solo para el cliente también.

Nos referimos a esta colección más amplia de características simplemente como “Acciones”. Las Acciones te permiten pasar una función a elementos del DOM como <form/>:

<form action="{search}">
	<input name="query" />
	<button type="submit">Search</button>
</form>

La función de action puede operar de forma síncrona o asíncrona. Puedes definirlas en el lado del cliente utilizando JavaScript estándar o en el servidor con la directiva 'use server'. Cuando usas una acción, React gestionará el ciclo de vida del envío de datos por ti, proporcionando ganchos como useFormStatus y useFormState para acceder al estado actual y la respuesta de la acción del formulario.

Por defecto, las acciones se envían dentro de una transición, manteniendo la página actual interactiva mientras la acción se está procesando. Dado que las acciones admiten funciones asíncronas, también hemos añadido la capacidad de usar async/await en transiciones. Esto te permite mostrar una interfaz de usuario pendiente con el estado isPending de una transición cuando una solicitud asíncrona como fetch comienza, y mostrar la interfaz de usuario pendiente durante toda la aplicación de la actualización.

Junto con las acciones, estamos introduciendo una función llamada useOptimistic para gestionar actualizaciones de estado optimistas. Con este gancho, puedes aplicar actualizaciones temporales que se revierten automáticamente una vez que se confirma el estado final. Para las acciones, esto te permite establecer de forma optimista el estado final de los datos en el cliente, asumiendo que el envío es exitoso, y revertir al valor para los datos recibidos del servidor. Funciona utilizando async/await regular, por lo que funciona igual ya sea que estés usando fetch en el cliente o una Acción del Servidor desde el servidor.

Los autores de bibliotecas pueden implementar props de action={ fn } personalizadas en sus propios componentes con useTransition. Nuestro objetivo es que las bibliotecas adopten el patrón de Acciones al diseñar sus API de componentes, para proporcionar una experiencia consistente para los desarrolladores de React. Por ejemplo, si tu biblioteca proporciona un componente <Calendar onSelect={ eventHandler }>, considera también exponer un <Calendar selectAction= { action }> a la API, también.

Aunque inicialmente nos enfocamos en Acciones del Servidor para la transferencia de datos cliente-servidor, nuestra filosofía para React es proporcionar el mismo modelo de programación en todas las plataformas y entornos. Cuando sea posible, si introducimos una característica en el cliente, también buscamos que funcione en el servidor, y viceversa. Esta filosofía nos permite crear un único conjunto de API que funcione sin importar dónde se ejecute tu aplicación, facilitando la actualización a diferentes entornos más adelante.

Las Acciones están disponibles ahora en el canal Canary y se lanzarán en la próxima versión de React.

Nuevas características en React Canary

Introdujimos React Canaries como una opción para adoptar características nuevas y estables individualmente tan pronto como su diseño esté cerca de ser finalizado, antes de que sean lanzadas en una versión estable de semver. Los Canaries son un cambio en la forma en que desarrollamos React. Anteriormente, las características se investigaban y construían de forma privada dentro de Meta, por lo que los usuarios solo veían el producto final pulido cuando se lanzaba en Stable. Con Canaries, estamos construyendo en público con la ayuda de la comunidad para finalizar las características que compartimos en la serie de blogs React Labs. Esto significa que te enteras de las nuevas características antes, mientras están siendo finalizadas en lugar de después de que estén completas. Componentes del Servidor de React, Carga de Activos, Metadatos del Documento y Acciones han llegado todos a React Canary, y hemos añadido documentación para estas características en react.dev:

Directivas: "use client" y "use server" son características del empaquetador diseñadas para marcos de trabajo de React de pila completa. Marcan los “puntos de división” entre los dos entornos: "use client" indica al empaquetador que genere una etiqueta <script> (como Astro Islands), mientras que "use server" le dice al empaquetador que genere un punto final POST (como Mutaciones tRPC). Juntas, te permiten escribir componentes reutilizables que componen la interactividad del lado del cliente con la lógica relacionada del lado del servidor.
Metadatos del Documento: añadimos soporte integrado para renderizar etiquetas <title>, <meta> y <link> de metadatos en cualquier lugar de tu árbol de componentes. Estos funcionan de la misma manera en todos los entornos, incluyendo código completamente del lado del cliente, SSR y RSC. Esto proporciona soporte integrado para características pioneras por bibliotecas como React Helmet.
Carga de Assets: integramos Suspense con el ciclo de vida de carga de recursos como hojas de estilo, fuentes y scripts para que React los tenga en cuenta para determinar si el contenido en elementos como <style>, <link> y <script> está listo para ser mostrado. También hemos añadido nuevas APIs de Carga de Recursos como preload y preinit para proporcionar un mayor control sobre cuándo debe cargar y inicializarse un recurso.
Acciones: Como se compartió anteriormente, hemos añadido Acciones para gestionar el envío de datos desde el cliente al servidor. Puedes añadir action a elementos como <form/>, acceder al estado con useFormStatus, manejar el resultado con useFormState y actualizar de forma optimista la interfaz de usuario con useOptimistic.

Dado que todas estas características funcionan juntas, es difícil lanzarlas en el canal Stable individualmente. Lanzar Acciones sin los ganchos complementarios para acceder a los estados de formulario limitaría la usabilidad práctica de las Acciones. Introducir Componentes del Servidor de React sin integrar Acciones del Servidor complicaría la modificación de datos en el servidor.

Antes de poder lanzar un conjunto de características en el canal Stable, necesitamos asegurarnos de quefuncionen de manera cohesiva y que los desarrolladores tengan todo lo que necesitan para usarlas en producción. Los Canaries de React nos permiten desarrollar estas características individualmente y lanzar las APIs estables incrementalmente hasta que el conjunto completo de características esté completo.

El conjunto actual de características en React Canary está completo y listo para ser lanzado.

La próxima versión principal de React

Después de un par de años de iteración, react@canary está ahora listo para ser lanzado a react@latest. Las nuevas características mencionadas anteriormente son compatibles con cualquier entorno en el que se ejecute tu aplicación, proporcionando todo lo necesario para su uso en producción. Dado que la Carga de Activos y los Metadatos del Documento pueden ser un cambio disruptivo para algunas aplicaciones, la próxima versión de React será una versión importante: React 19.

Aún queda más por hacer para preparar el lanzamiento. En React 19, también estamos añadiendo mejoras solicitadas durante mucho tiempo que requieren cambios disruptivos, como el soporte para Componentes Web. Nuestro enfoque ahora es implementar estos cambios, prepararnos para el lanzamiento, finalizar la documentación para las nuevas características y publicar anuncios sobre lo que se incluye.

Compartiremos más información sobre todo lo que incluye React 19, cómo adoptar las nuevas características del cliente y cómo crear soporte para Componentes del Servidor de React en los próximos meses.

Offscreen (renombrado a Activity).

Desde nuestra última actualización, hemos cambiado el nombre a una capacidad que estamos investigando de “Offscreen” a “Activity”. El nombre “Offscreen” implicaba que solo se aplicaba a partes de la aplicación que no eran visibles, pero mientras investigábamos la función nos dimos cuenta de que es posible que partes de la aplicación sean visibles e inactivas, como el contenido detrás de un modal. El nuevo nombre refleja más de cerca el comportamiento de marcar ciertas partes de la aplicación como “activas” o “inactivas”.

Activity aún está en investigación y nuestro trabajo restante es finalizar los primitivos que se exponen a los desarrolladores de bibliotecas. Hemos pospuesto esta área mientras nos enfocamos en lanzar características que están más completas.

Además de esta actualización, nuestro equipo ha presentado en conferencias y ha participado en podcasts para hablar más sobre nuestro trabajo y responder preguntas.

Sathya Gunasekaran habló sobre el Compilador de React en la conferencia React India.
Dan Abramov dio una charla en RemixConf titulada “React desde otra dimensión”, que explora una historia alternativa de cómo podrían haberse creado React Server Components y Actions.
Dan Abramov fue entrevistado en el podcast JS Party de Changelog sobre React Server Components.
Matt Carroll fue entrevistado en el podcast Front-End Fire donde discutió sobre “The Two Reacts”.

Gracias a Lauren Tan, Sophie Alpert, Jason Bonta, Eli White y Sathya Gunasekaran por revisar esta publicación.

¡Gracias por leer y nos vemos en React Conf!