Suspense y lazy: qué siguen aportando hoy

Sí, Suspense se sigue usando.

Pero conviene entender para qué:

• mostrar un fallback mientras algo suspende
• lazy loading de componentes con lazy
• integraciones con fuentes de datos compatibles con Suspense

No es un reemplazo universal de cualquier isLoading.

lazy + Suspense

import { lazy, Suspense } from 'react';

const SettingsPage = lazy(() => import('./SettingsPage'));

function App() {
  return (
    <Suspense fallback={<p>Cargando módulo...</p>}>
      <SettingsPage />
    </Suspense>
  );
}

Esto permite dividir código y cargar el componente solo cuando hace falta.

Qué hace realmente Suspense

Suspense define un límite visual. Si algo dentro “suspende”, React muestra el fallback hasta que ese contenido esté listo.

Dónde encaja bien

• rutas pesadas
• modales poco usados
• paneles secundarios
• búsqueda o listados con fuentes compatibles

Qué no conviene asumir

• que cualquier fetch con useEffect ya usa Suspense
• que debes envolver media app sin criterio
• que sustituye por completo el modelado de estados de carga

Regla práctica

Empieza usando Suspense con lazy. Es el caso más claro y útil.

Después, si tu stack de datos o framework soporta Suspense de forma nativa, entonces ya compensa profundizar más.

La siguiente lección trata las transiciones, que suelen complementar bien estas experiencias de carga.