3 Actualizaciones interesantes de React 19

Cursos

Recursos

Blog

Cada semana nuevos hacks de desarrollo web y diseño.

Guías

Guías completas sobre TS, JS, React, Github y más.

Tutoriales

Ejercicios prácticos para dominar el desarrollo web.

Inicia sesión

3 Actualizaciones interesantes de React 19

Héctorbliss

@hectorbliss

Mira el video si prefieres:

Son muchas las mejoras y novedades que React 19 nos regalará, pero hay tres en particular que quiero mostrarte en este video, también pienso que todas estas actualizaciones son muy acertadas, incluso cuando se pueden considerar breaking changes. Es bueno saber que el equipo de React sigue fielmente la filosofía de su patronsito Zuckerberg, y siguen con muchas ganas de moverse rápido, aunque se rompan cosas, como la compatibilidad, React 19 es un gran salto para la biblioteca, te dejo un video donde te hablo más a detalle sobre React 19. Pero, en esta ocasión, hablaremos de 3 aciertos en su nueva API, tres actualizaciones interesantes (para mí) de React 19. 🍿

#1 Adios <Context.Provider>

Ya no tenemos que renderizar <Context.Provider>, ahora el propio contexto se puede usar como proveedor. 🤯

const Context = createContext('blissito');

function App({children}) {
  return (
    <Context value="blissmo">
      {children}
    </Context>
  );  
}

Así es, también es importante mencionar que el equipo de React está preparando deprecar por completo la sintaxis anterior, por eso planean también liberar algunos scripts que podremos correr para automáticamente actualizar nuestro código.

🧙🏼‍♂️Me dicen brujo porque puedo ver en el futuro, y veo, veo mucho bug por incompatibilidad 🫠

#2 Funciones de clean up en refs

Tener una función de cleanup, similar a la que tenemos en el useEffect, se vuelve esencial aquí para lograr resetear el ref si el elemento es removido del DOM, sobre todo si pensamos que useEffect está por desaparecer.

<input
  ref={(ref) => {
    // NUEVO: Ahora podemos resetear el ref
    // si el elemento es removido del DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

Cuando el componente se desmonta, React llamará la función cleanup.

Esto funciona para ref del DOM, ref de componentes de clase y para useImperativeHandle.

#3 Soporte de la Metadata del documento

Ya sabes que existen algunas etiquetas HTML que mantienen “metadatos”, estos datos describen todo tu sitio web, regularmente información que utilizan los motores de búsqueda como Google o las redes sociales cuando compartes un link, como la imagen de preview que se muestra en Facebook cuando publicas un enlace. 🔗

Bueno, pues estos datos se colocan en etiquetas <title>, <link> o <meta>, estas etiquetas se colocan en la cabecera <head> del documento. Históricamente, estas etiquetas han sido difíciles de configurar en React, incluso imposible, existen soluciones como react-helmet, pero echarlas a andar requiere esfuerzo, sin mencionar que la falta de esta habilidad ha hecho que publiquemos sitios web invisibles para los motores de búsqueda. 🔍

En React 19, ahora podemos agregar etiquetas con metadata sin configurar nada especial:

function EmailViewer({email}) {
  return (
    <article>
      <h1>{email.title}</h1>
      <title>{email.title}</title>
      <meta name="author" content="Blissmo" />
      <link rel="author" href="https://fixtergeek.com" />
      <meta name="keywords" content={email.subject} />
	    <h2>{email.subject}</h2>
      <p>{email.content}</p>
    </article>
  );
}

Lo más loco de esta nueva habilidad es que React va a reconocer estas etiquetas, sin importar mucho donde las coloques y las moverá por ti, a la sección <head> del documento, es decir, que les hará hoisting. Con esto, React se asegura de que el código JSX que escribas siempre será compatible con diferentes entornos como es el cliente, el SSR streaming y los Server Components que son el futuro.

Por último: te voy a regalar el pilón

Ahí están las 3 novedades, pero te voy a regalar una más antes de irnos. 😎

Se trata de la compatibilidad que React 19 tendrá con los Custom Elements. Los Custom Elements son un intento de crear elementos HTML que puedan trabajar en cualquier aplicación web. Vue, Svelte Preact, Solid, hasta Angular y otros muchos son compatibles, pero React no lo había sido, ahora lo será, seguirá siendo menos compatible que los demás, pero no deja de mostrar su esfuerzo por ser parte, así que no dejes de prestarle atención a los Custom Elements, te dejo un enlace.

¡Y ya está, ahora ya estás más en contexto! ✅ Yo soy Héctorbliss y nos vemos en el curso. 🤓