Suspense

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.

1. 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).

2. 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.

3. 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 #

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

4. 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 #

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

5. 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 #

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

6. Limitaciones de Suspense #

1. No Cubre Todas las Operaciones Asíncronas:

   • Por sí solo, Suspense no puede esperar datos directamente. Necesita soporte adicional (por ejemplo, React Query).

2. Solo para Cliente:

   • Actualmente, Suspense no soporta el renderizado en servidor (SSR) en todos los casos, aunque React 18 introdujo mejoras para manejarlo.

3. Complejidad de Fallbacks:

   • Si no diseñas bien los fallbacks, puedes afectar la experiencia del usuario.

7. Buenas Prácticas con Suspense #

1. Usa Fallbacks Claros:

   • Proporciona información útil al usuario mientras espera.

2. Divide Cargas Pesadas:

   • Usa React.lazy y Suspense para cargar solo lo que el usuario necesita.

3. Combina con Bibliotecas:

   • Usa herramientas como React Query o Relay para manejar datos junto con Suspense.

8. 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;