# Entendiendo React.Suspense

- Canonical URL: https://marcelocarmona.com/es/entendiendo-react-suspense
- Language: Espanol (es-ES)
- Published: 2018-12-04
- Tags: React, JavaScript
- Other languages: [English](https://marcelocarmona.com/understanding-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).

_[Interactive component: CodeSandbox — see the HTML page]_

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

```javascript
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 un estado de carga, por lo que podemos usar `maxDuration` para evitar este parpadeo extraño.

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

---

Site entrypoint for agents: [llms.txt](https://marcelocarmona.com/llms.txt) · [llms-full.txt](https://marcelocarmona.com/llms-full.txt) · [ai-index.json](https://marcelocarmona.com/ai-index.json) · [sitemap.xml](https://marcelocarmona.com/sitemap.xml)

Every HTML page on this site also serves this Markdown representation via
`Accept: text/markdown`, or by appending `.md` to the URL.