Cambios en la actualización de React 18 – Parte #1

A principios de junio, el equipo de React anunció el plan para React 18.

A diferencia de la última versión que no trajo muchas mejoras, esta versión está llena de cosas nuevas y cambios considerables.

¡Pues bien! En este momento solo está disponible la versión ALPHA, pero eso ya es suficiente para activar nuestra curiosidad y empezar a explorar las novedades que vienen.

Preparé un template para esta serie de artículos donde presentaré las nuevas funcionalidades de React.

Ahora, si quieres explorar, puedes acceder a este repositorio y clonar el template de React 18 ALPHA.

En esta serie de artículos veremos qué cambió en API Root, Strict Mode, Automatic Batching, Concurrent Mode (Concurrent Rendering), SSR streaming y Suspense, y qué hay de nuevo con startTransition, useDeferredValue y SuspenseList.

API Root

La nueva API Root es la puerta de entrada a las nuevas funcionalidades.

Estará disponible junto con la API Root legada, así las aplicaciones podrán ser migradas cada una a su ritmo.

Si quieres seguir esta discusión del equipo de React, solo accede aquí.

La gran novedad aquí es la disponibilidad de createRoot, que cambiará un poco la sintaxis de cómo iniciamos nuestras aplicaciones.

Modo antiguo:

import { render } from "react-dom";
import { App } from "./App";

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

Modo nuevo:

import { createRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = createRoot(container);

root.render(<App />);

¿Notaste? La raíz y la aplicación están separadas, lo que facilita implementar actualizaciones futuras.

Debido a las dificultades de sincronización en aplicaciones con server-side render, otro cambio que trajo la API Root fue eliminar la función hydrate de render, que ahora pasa a ser una opción de configuración de createRoot.

Modo antiguo:

import { hydrate } from "react-dom";
import { App } from "./App";

hydrate(<App />, document.getElementById('root'))

Modo nuevo:

import { createRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = createRoot(container, {hydrate: true});

root.render(<App />);

O también tenemos la opción de la función hydrateRoot, que a diferencia de createRoot, no será necesario llamar a la función render.

import { hydrateRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = hydrateRoot(container, <App user="Zappts" />);

Debes haber notado que hydrateRoot, a diferencia de createRoot, acepta un componente JSX como segundo parámetro.

Esto sucede porque la renderización inicial del árbol de elementos del lado del cliente debe corresponder con la del lado del servidor.

Ahora, si buscas renderizar nuevamente la aplicación, puedes hacerlo sin necesidad de crear un nuevo container, simplemente utilizando la variable que fue instanciada en la creación.

//…
const root = hydrateRoot(container, <App culture="Sawabona" />);
/*
Acción necesaria para actualización
*/
root.render(<App culture="Shikoba"/>);

Después del lanzamiento de React 18, aplicando este pequeño cambio, tenemos acceso a muchas mejoras y nuevas funcionalidades.

Las presentaré en los próximos artículos.

Espero que estés tan emocionado como yo por esta actualización.

Si te quedó alguna duda o quieres saber más sobre algo que mencioné en este artículo, o solo para decir lo que te pareció, no dudes en escribir en los comentarios, será muy importante para mí poder traer contenido relevante.

Muchas gracias por haber leído hasta aquí y hasta el próximo capítulo.

Este artículo fue desarrollado por Tadeu Agostini, desarrollador front-end Web de Zappts.

Consulta la parte #2 de esta publicación haciendo clic aquí!