Introducción
Suspense es un componente especial de React que permite manejar estados de carga cuando se realizan operaciones asíncronas, como cargar componentes de manera diferida o esperar datos de una API. Es una herramienta clave para mejorar la experiencia del usuario al gestionar la espera de recursos.

¿Qué es `Suspense`?

Propósito: Mostrar un indicador de carga mientras se espera la resolución de una operación asíncrona.
Dónde se usa:
- Lazy Loading con React.lazy.
- Renderizado asíncrono de datos (con bibliotecas como Relay o React Query).

Sintaxis

1<Suspense fallback={<ElementoDeCarga />}>
2  <Componente />
3</Suspense>

fallback: Contenido que se muestra mientras se espera.
Componente: El componente que depende de una operación asíncrona.

Caso 1: Lazy Loading con `React.lazy`

Suspense se combina con React.lazy para cargar componentes de manera diferida.

Código

1import React, { Suspense } from "react";
2
3const ComponentePesado = React.lazy(() => import("./ComponentePesado"));
4
5function App() {
6  return (
7    <div>
8      <h1>Ejemplo con Suspense</h1>
9      <Suspense fallback={<p>Cargando componente...</p>}>
10        <ComponentePesado />
11      </Suspense>
12    </div>
13  );
14}
15
16export default App;

Componente Pesado

1// ComponentePesado.js
2import React from "react";
3
4function ComponentePesado() {
5  return <h2>¡Este componente fue cargado de manera diferida!</h2>;
6}
7
8export default ComponentePesado;

Explicación

React.lazy: Carga el componente solo cuando se necesita.
Suspense: Muestra el fallback (<p>Cargando componente...</p>) mientras se descarga el componente.

Caso 2: Espera de Datos con Suspense

React permite integrar Suspense para esperar datos, aunque se necesita soporte adicional con bibliotecas como React Query o Relay.

Código con Simulación de una API

1import React, { Suspense } from "react";
2
3function fetchDatos() {
4  const datos = new Promise((resolve) => {
5    setTimeout(() => resolve("Datos cargados correctamente"), 3000);
6  });
7  return datos;
8}
9
10// Componente que espera los datos
11const ComponenteConDatos = () => {
12  const datos = React.use(fetchDatos());
13  return <h2>{datos}</h2>;
14};
15
16function App() {
17  return (
18    <div>
19      <h1>Ejemplo con Suspense y Datos</h1>
20      <Suspense fallback={<p>Cargando datos...</p>}>
21        <ComponenteConDatos />
22      </Suspense>
23    </div>
24  );
25}
26
27export default App;

Explicación

Simulación de API:
- fetchDatos devuelve una promesa que se resuelve después de 3 segundos.
Suspense:
- Muestra el fallback (<p>Cargando datos...</p>) mientras se resuelve la promesa.

Caso 3: Suspense Anidado

Puedes anidar varios niveles de Suspense para manejar diferentes cargas.

Código

1import React, { Suspense } from "react";
2
3const Componente1 = React.lazy(() => import("./Componente1"));
4const Componente2 = React.lazy(() => import("./Componente2"));
5
6function App() {
7  return (
8    <div>
9      <h1>Ejemplo de Suspense Anidado</h1>
10      <Suspense fallback={<p>Cargando Componente 1...</p>}>
11        <Componente1 />
12        <Suspense fallback={<p>Cargando Componente 2...</p>}>
13          <Componente2 />
14        </Suspense>
15      </Suspense>
16    </div>
17  );
18}
19
20export default App;

Explicación

Niveles de Suspense:
- Suspense principal espera a Componente1.
- El Suspense interno espera a Componente2.

Limitaciones de `Suspense`

No Cubre Todas las Operaciones Asíncronas:
- Por sí solo, Suspense no puede esperar datos directamente. Necesita soporte adicional (por ejemplo, React Query).
Solo para Cliente:
- Actualmente, Suspense no soporta el renderizado en servidor (SSR) en todos los casos, aunque React 18 introdujo mejoras para manejarlo.
Complejidad de Fallbacks:
- Si no diseñas bien los fallbacks, puedes afectar la experiencia del usuario.

Buenas Prácticas con `Suspense`

Usa Fallbacks Claros:
- Proporciona información útil al usuario mientras espera.
Divide Cargas Pesadas:
- Usa React.lazy y Suspense para cargar solo lo que el usuario necesita.
Combina con Bibliotecas:
- Usa herramientas como React Query o Relay para manejar datos junto con Suspense.

Ejemplo Completo: Suspense con Datos y Lazy Loading

Código

1import React, { Suspense } from "react";
2
3const ComponentePesado = React.lazy(() => import("./ComponentePesado"));
4
5function fetchDatos() {
6  const datos = new Promise((resolve) => {
7    setTimeout(() => resolve("Datos cargados correctamente"), 3000);
8  });
9  return datos;
10}
11
12const ComponenteConDatos = () => {
13  const datos = React.use(fetchDatos());
14  return <h2>{datos}</h2>;
15};
16
17function App() {
18  return (
19    <div>
20      <h1>Ejemplo Completo con Suspense</h1>
21      <Suspense fallback={<p>Cargando Componente Pesado...</p>}>
22        <ComponentePesado />
23      </Suspense>
24      <Suspense fallback={<p>Cargando Datos...</p>}>
25        <ComponenteConDatos />
26      </Suspense>
27    </div>
28  );
29}
30
31export default App;

Conclusión

Suspense es una herramienta poderosa para gestionar estados de carga en React, especialmente útil en combinación con:

Lazy Loading (React.lazy).
Carga de datos asíncronos (con bibliotecas como React Query).

Aporta una experiencia de usuario más fluida al mostrar indicativos de carga mientras los recursos se procesan.

Curso react nivel medio