⏳ Suspense en React: manejo de carga y datos asincrónicos

⏳ Suspense en React: manejo de carga y datos asincrónicos

React Suspense permite manejar la carga de componentes y datos asincrónicos de manera elegante, mostrando un fallback mientras se resuelve la información. Esto mejora la experiencia del usuario evitando interfaces incompletas o vacías durante la carga.

---

1️⃣ ¿Qué es Suspense?

Suspense es un componente de React que envuelve otros componentes que dependen de datos o recursos asincrónicos. Mientras los recursos no están listos, React muestra un contenido de fallback.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback=<div>Cargando...</div>>
      <LazyComponent />
    </Suspense>
  );
}
  

---

2️⃣ Ejemplo práctico: Carga de componente asincrónico

Supongamos que tenemos un componente PerfilUsuario que se carga de forma diferida:

// PerfilUsuario.js
export default function PerfilUsuario({ nombre }) {
  return <h2>Hola, {nombre}!</h2>;
}

// App.js
import React, { Suspense } from 'react';
const PerfilUsuario = React.lazy(() => import('./PerfilUsuario'));

function App() {
  return (
    <Suspense fallback=<div>Cargando perfil...</div>>
      <PerfilUsuario nombre="Ana" />
    </Suspense>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Fallback: "Cargando perfil..." mientras se carga el componente.

---

3️⃣ Suspense con datos asincrónicos

React 18 permite usar Suspense para datos mediante librerías como react-query o Relay, mostrando contenido de carga mientras se obtiene la información.

import { Suspense } from 'react';
import { useUserData } from './hooks';

function Perfil() {
  const user = useUserData(); // hook asincrónico
  return <div>Nombre: {user.name}</div>;
}

function App() {
  return (
    <Suspense fallback=<div>Cargando datos...</div>>
      <Perfil />
    </Suspense>
  );
}
  

---

4️⃣ Buenas prácticas con Suspense

• ✅ Usar fallback cortos y claros para mejorar la UX.
• ✅ Envolver solo los componentes que necesitan carga asincrónica.
• ✅ Combinar Suspense con React.lazy para lazy loading de componentes grandes.
• ✅ Evitar Suspense en componentes que se actualizan constantemente para no recargar el fallback continuamente.

---

5️⃣ Resumen

Suspense simplifica el manejo de carga de componentes y datos en React. Permite mostrar un fallback mientras se obtienen recursos asincrónicos, mejorando la experiencia del usuario.

← Volver al índice