Thread by @matiasfha

Sabes que actualmente puedes usar <Suspense> en React? bueno, no exactamente cómo se mostró en aquella épica presentación de Dan Abramov donde se mostró el poderío de "Concurrent Mode" pero ya tenemos avances de ello desde React 16.

<Suspense> es utilizado para mostrar un indicador de carga en caso de que el componente (o árbol de componentes) hijo no esté listo para ser renderizado aún.

Es decir, permite "suspender" el renderizado a la espera de que el o los componentes terminen de realizar alguna tarea

Hoy (React 17) está sólo disponible para realizar "lazy loading".
Esta característica, implementada en la api React.lazy es la que permite realizar "code splitting" (carga diferida)

React.lazy permite definir la carga (o importación) dinámica de un componente , es decir, el uso de `import()`

> Algo que por cierto ya está disponible nativamente en ES2020 egghead.io/lessons/javasc…

El uso de React.lazy y la carga dinámica o división de código (Code Splitting) permite disminuir el tamaño del bundle (el archivo gigante de JS que es enviado al navegador)

El comportamiento actual de <Suspense> es que React muestra un indicador de carga (o lo que sea que le pases como prop fallback) hasta que el componente esté listo para ser renderizado. PERO, cualquier componente "hermano" de aquel suspendido es renderizado de inmediato

Esto implica que algo como esto
<Suspense fallback={<Fallback />}>
<Suspendido />
<OtroComponente />
</Suspense>

renderizará <OtroComponente> y emitirá los efectos que ese componente (o sus hijos) definan

Pero esto cambiará es React 18. La nueva implementación de Suspense (basado en los Concurrent features) no montará (y por lo tanto no renderizará ni emitirá los efectos) el componente <OtroComponente /> hasta que el componente <Suspendido> esté listo

Es decir React esperará por todo el sub-árbol cubierto por el "perímetro" cubierto por <Suspend> y montará/renderizará todo una vez que TODOS los componentes estén listos y esto lo hará como si de un sólo árbol de componentes se tratara

Esto crea un modelo de renderizado mucho más predecible abriendo la puerta a nuevas implementaciones por parte de los desarrolladores de aplicaciones

Otro punto que se verá afectado es el uso de `ref`.
Actualmente al pasar un ref desde el componente padre a uno componente que está dentro del bloque <Suspense> pero que no está suspendido como en el ejemplo <OtroComponente>, el ref será inmediatamente añadido

ya que el componente se montó el ref apuntará al nodo del DOM inmediatamente en el render inicial. En la nueva implementación esto ya no es cierto ya que el componente <OtroComponente> no será montado hasta que <Suspendido> se resuelva, es decir el ref será null hasta ese momento

Puedes leer más información en el detallado post de @acdlite en el working group de React 18
github.com/reactwg/react-…