44

React Conf 2021: anuncios, cambios y el futuro de React.js

38274Puntos

hace un mes

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC.

Hace poco se llevo a cabo la React Conf, donde cada año muestran un poco acerca de todo lo que viene para el futuro de esta tecnología, y como era de esperarse, a más de uno dejó sorprendido con la cantidad de mejoras en las que se están trabajando.

React 18 💻

La versión 18 de React está a la vuelta de la esquina encontrándose ahora mismo en fase beta. Y vaya que nos trae consigo un catálogo de features bastante impresionantes.

Un setup diferente 🙌

Si ya tienes experiencia con esta tecnología, te sabrás casi de memoria como es el archivo contenedor de la App, cuya configuración es similar a esta:

import React from'react'import ReactDOM from'react-dom';
import App from'./App';

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

ReactDOM.render(<App />, container);
// O lo puedes hacer sin la constante container
ReactDOM.render(<App />, document.getElementById('app'))

Esta forma vas a poder seguir utilizándola como la forma legacy. Si actualizas tus proyectos, no tendrás ningún problema, no se va a romper ni nada por el estilo. El único detalle es que se te pedirá utilizar la New Root API para poder acceder a todo lo nuevo de la versión 18.

El uso de la nueva API del root es un poco más cómoda, como puedes ver aquí abajo:

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

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

// Nueva forma de crear el root.const root = ReactDOM.createRoot(container);

// Initial render: Renderiza un elemento en el root.
root.render(<App />);

Pero esto no se hizo solamente para que sea “visualmente mejor”, sino que se tiene un fundamento.

Se pensó mucho en la hidratación a la hora del SSR. Esta nueva forma de inicializar nuestro root permite eliminar el método de hydrate y reemplazarlo con una opción en la raíz, al igual que eliminar la devolución de llamada de render, lo que no tiene sentido en un mundo con hidratación parcial que se planea lograr con el componente de <Suspense />, del cual te hablaré un poco más adelante.

Actualmente esta es la forma de hidratar apps cuando trabajamos con SSR en React:

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

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

// Solo se hace el render con la hidratación
ReactDOM.hydrate(<App />, container);

Pero con la nueva Root API se vería más bien así:

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

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

// Se crea y hace el render al root con hidratación.const root = ReactDOM.hydrateRoot(container, <App />);

// En caso de requerir una actualización después de todo esto 
// solo basta con llamar al metodo render
root.render(<App />);

React Suspense para Server Side Render

💡 Cómo utilizar React Suspense

Este componente fue agregado desde la versión 16.6, pero solo de manera experimental.

Cuando tenemos un render del lado del servidor (SSR), se hacen un esfuerzo enorme por tratar de tener los tiempos más bajos de respuesta para no afectar la experiencia de usuario. Ahora con este nuevo componente podremos hacer mejoras y renderizar por partes, mostrar componentes que no necesitan ser llenados con data del servidor (header, footer, navbar) y esperar a los que sí la necesitan mientras mostramos un spinner o algo similar para que se tenga una buena experiencia.

Nuevos hooks

  • useId
    Con este nuevo hook tendrás la capacidad de generar ID’s sin la necesidad de una librería externa, manteniendo además una buena accesibilidad.

Su uso será extremadamente fácil:

function Checkbox() {
  const id = useId();
  return (
    <><labelhtmlFor={id}>Do you like React?</label><inputtype="checkbox"name="react"id={id} /></>
  );
);
  • useSyncExternalStore

Este hook viene a convertirse en la evolución de useMutableSource, el cual servía para que los componentes de React pudieran leer de forma segura y eficiente una fuente externa mutable en modo concurrente.

Este hook detectaba mutaciones que ocurren durante un proceso para evitar el tearing y automáticamente realizar actualizaciones cuando la fuente esté mutada, pero el detalle era que era muy difícil mantenerlo y al final se decidió reescribirlo dando entrada a useSyncExternalStore.

  • useDeferredValue

Retorna una versión diferida de el valor que le podrás poner una especie de “lag” en mili-segundos.

Tal vez te estés preguntando “¿para qué sería útil esto si lo que queremos es que nuestros componentes carguen rápido y no hagan lo contrario?”.

Bueno, cuando estás esperando que el usuario escriba o haga alguna acción dentro de las webApps, por lo general, vas a querer hacer que la interfaz responda a este tipo de acciones, muy comúnmente se hace cuando se maneja inputs. Con este hook podrás hacer fetch de data después de cierto tiempo que el usuario deje de escribir, por poner un ejemplo.

Y podrás usar este hook de la siguiente manera:

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <divclassName="App">
      {/* Puedes dejar un input como este para que el usuario escriba lo que quiera */}
      <inputvalue={text}onChange={handleChange} />
      ...
      {/* El texto escrito por el usuario se desplegará después de 2seg */}
      <MySlowListtext={deferredText} /></div>
  );
 }

startTransition

Cada vez puedes tener una comunicación más directa con React. Con la llegada de esta API será posible indicarle que actualizaciones de estado llegan a ser menos urgente, para así darle espacio a que se realicen las de mayor urgencia.

Lo podrás usar de la siguiente forma:

import { startTransition } from 'react';

function MyComponent() {
	// Todo lo que este fuera de startTransition se tomará como algo "urgente"
	doSomethingNow();
	
	// Mientras que lo que esta dentro, se llevará a cabo después de que terminen
	// las tareas de afuera
	startTransition(() => {
		doSomethingLater();
	});
}

Pero no es todo, puedes usar el hook useTransition que te dará los valores de startTransition como de isPending, el cual será un estado que por defecto tendrá el valor true, y cuando todo lo que este adentro de startTransition termine, cambiará a false

SuspenseList

Con este nuevo componente vas a tener un mayor control sobre la data que recibes y no sabemos el orden en el que puede llegar. Con <SuspenseList> podrás decidir el orden y mantener la interfaz de usuario (UI) bajo total control.

Este componente recibe una prop revealOrder, la cual puede ser forwards, backwards, together para definir el orden en como son mostrados los children:

<SuspenseListrevealOrder="forwards"><Suspensefallback={'Loading...'}><ProfilePictureid={1} /></Suspense><Suspensefallback={'Loading...'}><ProfilePictureid={2} /></Suspense><Suspensefallback={'Loading...'}><ProfilePictureid={3} /></Suspense>
  ...
</SuspenseList>

Automatic Batching

Las actualizaciones de estado anteriores siempre se llevarían a cabo en un solo render, incluso si se llamaron varias veces seguidas. Sin embargo, existe una limitación: si la función que llama a estas actualizaciones de estado fue asíncrona, las actualizaciones no serían en un solo batch si no que pueden ser en 2 o más. Esto ya no pasará en la siguiente versión.

Llevando esto a código lo que pasaría en la versión actual haría que se desencadenen dos actualizaciones de estado separadas, ahora en la siguiente versión se lanzarán juntas:

fetchFromApi().then(()=> {
    setLoading(false);
    setError(false);
})

Llevando la optimización al siguiente nivel 📈

El estado actual de esta librería permite hacer optimizaciones con algunos HOC’s y hooks, tales como useCallback, useMemo, React.memo() para ayudar a mejorar el performance de tus webApps diciéndole a React que componentes necesitarían ser actualizados si reciben nuevos o diferentes props (hablaremos más a fondo de esto en otro post).

Una de las cosas más interesantes que se habló en la conf es acerca de cómo evitar escribir código más complejo, que es lo que al final terminan ocasionando las herramientas ya mencionadas.

La solución es muy “sencilla”. Se espera construir a futuro (NO en React 18) una herramienta capaz de optimizar con la técnica de memoization nuestros componentes de manera automática, claro que esto suena muy fácil, pero es una herramienta de la cual no tendremos muchas noticias hasta dentro de varios meses, tenemos la seguridad de que se está trabajando en ella pero no sabemos cuando llegará (como una promesa en JavaScript👀)

React Native en todos lados 🌎

Facebook no se quiere quedar atrás en nada y está haciendo esfuerzos titánicos para que tengas React hasta en la cocina (no de manera literal… por el momento).

Actualmente tenemos a React Native solo dentro del mundo móvil con un pequeño dominio dentro de Android y iOS, pero no se queda ahí, ya que se comentó acerca del uso que está teniendo esta tecnología dentro de sistemas operativos de manera nativa como en Windows, al igual que en en el dashboard de la Xbox Series X.

¡Y aún hay más! Esta tecnología llegaría a estar para desarrollar VR 👀

Así que tendremos a React Native en estos escenarios:

  • Android
  • iOS
  • Desktop
  • VR
  • Web

Si estabas esperando una señal, ¡esta es! ✨

Estás en el mejor momento para empezar a desarrollar con esta tecnología. ¡No esperes más y empieza a aprender los fundamentos desde ya! No importa cuántas cosas se integren a futuro en las próximas versiones, los fundamentos siempre serán los mismos y podrás estar al día sin tanto problema.

¿Qué es lo que más te emociona del futuro de esta tecnología 👀? Déjamelo saber aquí abajo en los comentarios

Puedes empezar con esta gran saga de cursos:

#NuncaParesDeAprender

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC.
Leonardo de los angeles
Leonardo de los angeles
LeoCode0

38274Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
11
1323Puntos

Ya marqué un nuevo propósito para el siguiente año: aprender React

2
38274Puntos
un mes

Estupendo!

Nos cuentas como te va 👀

5
5712Puntos

Estoy en modo focus aprendiendo React y haciendo mini proyectos mientras que a la par hago uno grande y me tiene muy entusiasmado. Estoy usando StoryBook para documentar mis componentes y tener fácil acceso a ellos para su reutilización y eso parece mágico en ahorro de tiempo.

4
8712Puntos

Increíble Post, muchas gracias por estas novedades!

4
13221Puntos

Excelente!. Estaba pensando en aprender sobre VR , y dejar un poco de lado React, pero veo que trabajarán muy bien juntos ❤️

2
13283Puntos

Muy buena información Leo 🚀

React hasta en la sopa jaja 😆

2
3660Puntos

Me parece maravillosa esta nueva versión de React, llevo aprendiendo la misma durante el ultimo año y de verdad me encanta. Al ver que se expande como herramienta para poder desarrollar en otras plataformas, siento mucho más interés y emoción al pensar la variedad de proyectos que se pueden llevar a cabo con esta, maravilloso de verdad 🙌🙌

1
2429Puntos

Espero entender todo esto en unos meses. Tengo muy buena referencia de esta tecnología.