- Published on
Entendiendo React.Suspense
- Authors
- Name
- Marcelo Carmona
- @carmonamarcelo
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>