¡React 18 Alpha está disponible! ¿Ahora qué?

¡Hola!

Nos han mantenido en suspense bastante tiempo, ¡pero los desarrolladores de React tienen algunas características nuevas con las que jugar!
La mejor parte: casi todos los beneficios de la actualización no requieren cambios importantes en el código.

La nueva Root API

React siempre ha tenido que tener algún tipo de root (raíz). Probablemente estés acostumbrado a ver algo como esto en el nivel superior de sus aplicaciones:

import ReactDOM from 'react-dom';
import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

Bastante normal, ¿verdad? Bien. Este ReactDOM.render () ahora se llama Legacy Root API. Funciona exactamente de la misma manera que React 17. Aún se permite mantenerla, pero en el futuro quedará obsoleta.

La nueva API Root se ve un poco diferente:

import ReactDOM from 'react-dom';
import App from 'App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

¡Es muy similar! Utiliza ReactDOM.createRoot en lugar del método anterior.

Con este cambio, suceden algunas cosas:

  • El método de hydrate se ha ido y ahora es una opción en createRoot
  • El callback de render ha desparecido (y ahora puede ser un prop pasado a <App /> o lo que sea que le des a root)

Si no utilizas estas dos funciones, no tiene que preocuparte por sus cambios. Si deseas obtener más detalles sobre ellos, aquí hay algunos ejemplos de cambios de código del equipo core de React.

¡Al cambiar a la nueva API raíz, automáticamente obtienes las nuevas mejoras listas para usar que vienen con React 18!

Este cambio es todo lo que necesitas hacer para actualizar tu cliente a React 18. Si solo usas React en el lado del cliente, ¡ya has terminado y puedes pasar a la sección de instalación a continuación! Si usas React del lado del servidor o desea obtener más información sobre Suspense, sigue leyendo.

Suspense

Dejando de lado los juegos de palabras, creo que TODOS estamos increíblemente emocionados de que Suspense finalmente salga con todo el apoyo. React 16 tenía soporte técnico, pero nunca fue completo y no fue muy fácil de entender.

Entonces, ¿qué diablos es Suspense? Es un conjunto de funcionalidades que permite esperar a que los datos se resuelvan antes de una transición de estado (también conocido como transiciones retrasadas), reducir los conflictos de la interfaz de usuario mientras se cargan los datos (también conocido como limitación del marcador de posición) y coordinar la apariencia de un conjunto de componentes transmitiéndolos en orden (SuspenseList).

Si jugaste con Suspense antes, es posible que veas algunos cambios en el comportamiento de «Suspense Legacy», pero si quieres probarlo por primera vez, el resumen es que envuelves tus componentes en un componente <Suspense> , así :

<Suspense fallback={<Loading />}>
  <SomeComponentThatSuspends />
  <SomeOtherComponent />
</Suspense>

En este ejemplo, React mostrará el componente al principio, y luego reemplazará <Loading/> con <SomeComponentThatSuspends /> y <SomeOtherComponent /> cuando los datos se resuelvan en SomeComponentThatSuspends />.

Quiero volver a repetir esto, porque es diferente de las versiones anteriores: ¡nada dentro del componente <Suspense /> se procesará hasta que se resuelvan los datos! Puedes ver una muestra de código del equipo corede React usando esto aquí.

Funciones concurrentes

Hay algunos métodos que vienen con React 18 que son completamente opcionales. No todos están documentados todavía, pero lo estarán a medida que la versión esté optimizada:

  • startTransition: mantenga la interfaz de usuario receptiva durante una transición de estado.
  • useDeferredValue: difiere la actualización de las partes menos importantes de su aplicación.
  • <SuspenseList>: coordina el orden en que aparecen los indicadores de carga.
  • Renderizado del lado del servidor con hydration selectiva: hace que tu aplicación se cargue y se vuelva interactiva más rápido.

Lo bueno de cada una de estas funciones es que no tienes que incluirlas todas en toda la aplicación. Puedes optar por crear con ellos solo en determinadas partes de la aplicación, lo cual es muy agradable y flexible.

¡Basta ya! ¿Cómo lo instalo?

Puedes usar la etiqueta @alpha para instalar React 18 de inmediato:

npm install react@alpha react-dom@alpha

Pasarán meses antes de que Alpha llegue a Beta, y más tiempo después de eso hasta que sea completamente estable. Puedes ver más detalles sobre la hoja de ruta aquí, que también incluye otras funciones que aún no están implementadas.

El Grupo de trabajo de React también tiene un conjunto completo de preguntas y discusiones sobre estas características, si desea leer más, ¡así como su publicación de blog de anuncios!

¡Hasta la próxima!

Puedes leer el artículo original en inglés en https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *