lunes 30 septiembre 2024

Cómo manejar la carga de componentes con Suspense en React

¿Qué es Suspense en React y cómo funciona?

El componente Suspense de React está diseñado para gestionar la carga de componentes que se renderizan de manera diferida o asincrónica. Normalmente se usa junto con React.lazy para dividir el código en fragmentos que se cargan bajo demanda. Esto significa que, cuando se utiliza Suspense, React puede mostrar un estado de "carga" (por ejemplo, un spinner) mientras se espera a que un componente se cargue completamente.

Implementación básica

1. Importar Suspense y lazy: Se deben importar ambos módulos desde React.

2. Usar React.lazy para envolver componentes: Esto permite cargar componentes de manera diferida.

3. Usar Suspense para definir el fallback: El fallback es el contenido que se muestra mientras el componente está en proceso de carga.

Ejemplos de uso de Suspense en React

Carga de un componente diferido con React.lazy

import React, { Suspense, lazy } from 'react';

// Cargar un componente de forma diferida
const MiComponente = lazy(() => import('./MiComponente'));

function App() {
  return (
    <div>
      <h1>Mi Aplicación</h1>
      {/* Mostrar un spinner mientras se carga MiComponente */}
      <Suspense fallback={<div>Cargando...</div>}>
        <MiComponente />
      </Suspense>
    </div>
  );
}

export default App;

Suspense en combinación con React Router

Suspense también se puede usar para manejar la carga de rutas en React Router, mejorando la experiencia del usuario al cambiar entre páginas.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Carga diferida de componentes
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Cargando rutas...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Referencia oficial

Puedes consultar más información sobre Suspense en la documentación oficial de React.

Etiquetas:

react javascript

Creado por:

Jorge García

Fullstack developer