Tabla de contenidos
El pasado 12 de junio tuvimos la oportunidad junto a otros desarrolladores frontend de Apiumhub de asistir al evento React Next 2019 en Tel Aviv, Israel. La conferencia fue una experiencia increíble, con muchas charlas muy interesantes que incitan a investigar y profundizar en distintos conceptos. Pero hubo una charla en particular que me llamó especialmente la atención. Se trata de ‘Modern React – The Essentials’ de Liad Yosef. Liad hizo un repaso a todas las grandes novedades de React, como hooks, portals, y async rendering. Ya pudimos echarle un primer vistazo a este último concepto en la demostración que hizo Dan Abramov en la JSConf Iceland 2018, donde puso dos ejemplos prácticos de Suspense y Concurrent Mode (Time Slicing en el vídeo).
El objetivo de ambas features es proporcionar una mejor experiencia de usuario a todos en cualquier aplicación construida con React. Es importante entender que la mayor parte de los problemas que sufren los usuarios se pueden agrupar como consecuencia de dos motivos: la velocidad de la conexión o respuesta del servidor, y el poder computacional.
React Suspense
(disponible a partir de React 16.6.0)
Orientado a solventar el primero caso de los posibles problemas a los que se enfrentan los usuarios, Suspense nos permite detener el renderizado de un componente y mostrar otro en su lugar como fallback, como el componente de Loading, un placeholder, o cualquier otro componente que necesitemos.
Es decir, detener el renderizado mientras ocurre la carga de datos o dependencias que ocurre de forma asíncrona. Seguramente tengas algún que otro flag Loading guardado con Redux. Suspense te permitirá sustituirlo.
Para hacer uso de esta funcionalidad necesitamos dos cosas: React.lazy() y <React.Suspense>.
React.lazy permite renderizar un import dinámico como un componente normal. Recibe una función que llama a import de forma dinámica. Lo cual devolverá una Promise que una vez resuelta, será componente de React.
const LazyComponent = React.lazy(() => import("./some-component"));
En nuestro ejemplo, para poder mostrar algo mientras LazyComponent se está cargando, debemos envolverlo dentro de Suspense, de la siguiente forma:
const LazyComponent = React.lazy(() => import("./some-component"));
function ParentComponent() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<div>
<LazyComponent />
</div>
</React.Suspense>
);
}
Esto nos permite tener un fallback. La propiedad fallback recibe cualquier componente React.
Con Suspense, React puede pausar la actualización del estado en cualquier momento, hasta que se hayan completado todas las peticiones de datos necesarias dentro de un componente hijo. Durante esta espera, React puede gestionar otras actualizaciones que sean más prioritarias. Esto nos ayuda a que la experiencia de usuario sea buena, ya que no sufrimos de “congelaciones” en la UI.
React Concurrent Mode
(aún no disponible, pero según el roadmap será introducido a lo largo de 2019)
Pensado para mejorar la experiencia de usuario en aquellos casos cuando el renderizado es muy intenso en el dispositivo del usuario, Concurrent Mode nos permitirá a React a detener el render de un componente (o árbol de componentes) que es lento o costoso, procesar otros eventos más importantes, y posteriormente retomar el rendering de la parte más problemática. En otras palabras, permitirá renderizar el árbol de componentes sin bloquear el hilo principal.
A pesar de que es algo que nos gustaría tener disponible ya, tenemos que esperar antes de introducirlo en nuestros proyectos. El hecho de que en la propia API quede reflejado que es algo que es unstable al día de hoy, es más que significativo:
<React.unstable_ConcurrentMode>
<SomeComponent />
</React.unstable_ConcurrentMode>
Mientras estamos a la espera de poder probar más a fondo esta feature, no se debe olvidar la otra gran novedad introducida a React recientemente, que son los Hooks, de lo cual ya hemos hablado en este otro artículo.
