Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
27 lines (21 sloc) 1.18 KB
title author layout lang ref permalink path tags
Entendiendo React.Suspense
Marcelo Carmona
post
es
understanding-react-suspense
entendiendo-react-suspense
2018-12-04-entendiendo-react-suspense.md
React
JavaScript

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)

<iframe src="https://codesandbox.io/embed/6wnrnmyq43" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

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>