Esta es una nueva característica que nos permite “detener” un render hasta que hayamos terminado una tarea (por ejemplo, cargar datos desde una api)

Vamos a buscar una tarea cuando el componente está montado, y guardaremos el resultado en una caché muy simple. La parte interesante que hay que entender es cuando lanzamos una promesa, esta es atrapada por Suspense y muestra un loading… hasta que esta promesa se resuelve.

A veces tenemos una conexión rápida y el recurso se carga muy rápidamente, en este caso tal vez no sea necesario mostrar loading…, por lo que podemos usar maxDuration para evitar este parpadeo extraño

<Suspense maxDuration={400} fallback={<div>Loading...</div>}>
  <Task />
</Suspense>