Entendiendo React.Suspense

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.

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function fetchFirstTask() {
  return fetch("https://jsonplaceholder.typicode.com/todos/1").then(response =>
    response.json()
  );
}

let cache = null;

function Task() {
  if (!cache) {
    throw fetchFirstTask().then(task => (cache = task));
  }
  return (
    <div>
      {cache.completed ? "✅" : "⛔️"} {cache.title}
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <h1>My task</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Task />
      </Suspense>
    </div>
  );
}

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>