Composición del estado de carga de React Suspense: Gestión de carga anidada

React Suspense, introducido en React 16.6, proporciona una forma declarativa de manejar los estados de carga en tu aplicación. Te permite "suspender" la renderización de un componente hasta que sus dependencias (como datos o código) estén listas. Si bien su uso básico es relativamente sencillo, dominar Suspense implica comprender cómo componer los estados de carga de manera efectiva, especialmente cuando se trata de escenarios de carga anidada. Este artículo proporciona una guía completa de React Suspense y sus técnicas avanzadas de composición para una experiencia de usuario fluida y atractiva.

Comprensión de los conceptos básicos de React Suspense

En esencia, Suspense es un componente de React que acepta una prop fallback. Este fallback se renderiza mientras los componentes envueltos por Suspense están esperando que algo se cargue. Los casos de uso más comunes implican:

• División de código con React.lazy: Importación dinámica de componentes para reducir el tamaño inicial del paquete.
• Obtención de datos: Esperar a que se resuelvan los datos de una API antes de renderizar el componente que depende de ellos.

División de código con React.lazy

React.lazy te permite cargar componentes de React bajo demanda. Esto puede mejorar significativamente el tiempo de carga inicial de tu aplicación, especialmente para aplicaciones grandes con muchos componentes. Aquí tienes un ejemplo básico:

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

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

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

export default App;

            

              
                Copy
              
            
          

En este ejemplo, MyComponent solo se carga cuando es necesario. Mientras se está cargando, se muestra el fallback (en este caso, un simple mensaje de "Cargando...").

Obtención de datos con Suspense

Si bien React.lazy funciona de inmediato con Suspense, la obtención de datos requiere un enfoque ligeramente diferente. Suspense no se integra directamente con bibliotecas de obtención de datos estándar como fetch o axios. En cambio, necesitas usar una biblioteca o patrón que pueda "suspender" un componente mientras espera los datos. Una solución popular implica usar una biblioteca de obtención de datos como swr o react-query, o implementar una estrategia de gestión de recursos personalizada.

Aquí tienes un ejemplo conceptual utilizando un enfoque de gestión de recursos personalizado:

            // Resource.js
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: '¡Datos Obtenidos!' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

// App.js
import React, { Suspense } from 'react';
import MyComponent from './MyComponent';

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

export default App;

            

              
                Copy
              
            
          

Explicación:

• createResource: Esta función toma una promesa y devuelve un objeto con un método read.
• read: Este método verifica el estado de la promesa. Si está pendiente, lanza la promesa, lo que suspende el componente. Si se resuelve, devuelve los datos. Si se rechaza, lanza el error.
• MyComponent: Este componente utiliza el método resource.read() para acceder a los datos. Si los datos no están listos, el componente se suspende.
• App: Envuelve MyComponent en Suspense, proporcionando una interfaz de usuario de fallback mientras se cargan los datos.

Composición de estados de carga: El poder de Suspense anidado

El verdadero poder de Suspense radica en su capacidad de ser compuesto. Puedes anidar componentes Suspense para crear experiencias de carga más granulares y sofisticadas. Esto es particularmente útil cuando se trata de componentes que tienen múltiples dependencias asíncronas o cuando deseas priorizar la carga de ciertas partes de tu interfaz de usuario.

Suspense anidado básico

Imaginemos un escenario en el que tienes una página con un encabezado, un área de contenido principal y una barra lateral. Cada uno de estos componentes podría tener sus propias dependencias asíncronas. Puedes usar componentes Suspense anidados para mostrar diferentes estados de carga para cada sección de forma independiente.

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Cargando encabezado...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Cargando contenido principal...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Cargando barra lateral...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

En este ejemplo, cada componente (Header, MainContent y Sidebar) está envuelto en su propio límite de Suspense. Esto significa que si el Header todavía se está cargando, se mostrará el mensaje "Cargando encabezado...", mientras que el MainContent y el Sidebar aún pueden cargarse de forma independiente. Esto permite una experiencia de usuario más receptiva e informativa.

Priorización de los estados de carga

A veces, es posible que desees priorizar la carga de ciertas partes de tu interfaz de usuario. Por ejemplo, es posible que desees asegurarte de que el encabezado y la navegación se carguen antes del contenido principal. Puedes lograr esto anidando componentes Suspense estratégicamente.

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

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Cargando encabezado y contenido...</p>}>
      <Header />
      <Suspense fallback={<p>Cargando contenido principal...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

En este ejemplo, el Header y el MainContent están envueltos en un único límite de Suspense exterior. Esto significa que el mensaje "Cargando encabezado y contenido..." se mostrará hasta que se carguen tanto el Header como el MainContent. El Suspense interno para MainContent solo se activará si el Header ya está cargado, lo que proporciona una experiencia de carga más granular para el área de contenido.

Gestión avanzada de carga anidada

Más allá del anidamiento básico, puedes emplear técnicas más avanzadas para gestionar los estados de carga en aplicaciones complejas. Éstas incluyen:

• Componentes de fallback personalizados: Uso de indicadores de carga más atractivos visualmente e informativos.
• Manejo de errores con límites de error: Manejo elegante de errores que ocurren durante la carga.
• Debouncing y Throttling: Optimización de la cantidad de veces que un componente intenta cargar datos.
• Combinación de Suspense con transiciones: Creación de transiciones suaves entre estados de carga y estados cargados.

Componentes de fallback personalizados

En lugar de utilizar mensajes de texto simples como fallbacks, puedes crear componentes de fallback personalizados que proporcionen una mejor experiencia de usuario. Estos componentes pueden incluir:

• Spinners: Indicadores de carga animados.
• Skeletons: Elementos de interfaz de usuario de marcador de posición que imitan la estructura del contenido real.
• Barras de progreso: Indicadores visuales del progreso de la carga.

Aquí tienes un ejemplo de cómo usar un componente de skeleton como fallback:

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // Deberás instalar esta biblioteca

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

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

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Este ejemplo utiliza la biblioteca react-loading-skeleton para mostrar una serie de marcadores de posición de skeleton mientras se está cargando MyComponent.

Manejo de errores con límites de error

Es importante manejar los errores que puedan ocurrir durante el proceso de carga. React proporciona límites de error, que son componentes que detectan errores de JavaScript en cualquier lugar del árbol de componentes hijo, registran esos errores y muestran una interfaz de usuario de fallback. Los límites de error funcionan bien con Suspense para proporcionar un mecanismo robusto de manejo de errores.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Algo salió mal.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Cargando...</p>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

En este ejemplo, el componente ErrorBoundary envuelve el componente Suspense. Si se produce un error durante la carga de MyComponent, el ErrorBoundary capturará el error y mostrará el mensaje "Algo salió mal".

Debouncing y Throttling

En algunos casos, es posible que desees limitar la cantidad de veces que un componente intenta cargar datos. Esto puede ser útil si el proceso de obtención de datos es costoso o si deseas evitar llamadas API excesivas. Debouncing y throttling son dos técnicas que pueden ayudarte a lograr esto.

Debouncing: Retrasa la ejecución de una función hasta después de que haya transcurrido una cierta cantidad de tiempo desde la última vez que se invocó.

Throttling: Limita la velocidad a la que se puede ejecutar una función.

Si bien estas técnicas a menudo se aplican a los eventos de entrada del usuario, también se pueden usar para controlar la obtención de datos dentro de los límites de Suspense. La implementación dependerá de la biblioteca de obtención de datos específica o de la estrategia de gestión de recursos que estés utilizando.

Combinación de Suspense con transiciones

La API de transiciones de React (introducida en React 18) te permite crear transiciones más suaves entre diferentes estados en tu aplicación, incluidos los estados de carga y los estados cargados. Puedes usar useTransition para indicar a React que una actualización de estado es una transición, lo que puede ayudar a prevenir actualizaciones abruptas de la interfaz de usuario.

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

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

function App() {
  const [isPending, startTransition] = useTransition();
  const [showComponent, setShowComponent] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowComponent(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Cargando...' : 'Cargar Componente'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Cargando componente...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

En este ejemplo, al hacer clic en el botón "Cargar Componente" se activa una transición. React priorizará la carga de MyComponent manteniendo la interfaz de usuario receptiva. El estado isPending indica si una transición está en curso, lo que te permite deshabilitar el botón y proporcionar información visual al usuario.

Ejemplos y escenarios del mundo real

Para ilustrar aún más las aplicaciones prácticas de Suspense anidado, consideremos algunos escenarios del mundo real:

• Página de producto de comercio electrónico: Una página de producto podría tener varias secciones, como detalles del producto, reseñas y productos relacionados. Cada sección se puede cargar de forma independiente utilizando límites de Suspense anidados. Puedes priorizar la carga de los detalles del producto para garantizar que el usuario vea la información más importante lo más rápido posible.
• Feed de redes sociales: Un feed de redes sociales podría consistir en publicaciones, comentarios y perfiles de usuario. Cada uno de estos componentes puede tener sus propias dependencias asíncronas. Suspense anidado te permite mostrar una interfaz de usuario de marcador de posición para cada sección mientras se cargan los datos. También puedes priorizar la carga de las propias publicaciones del usuario para proporcionar una experiencia personalizada.
• Aplicación de panel de control: Un panel de control puede contener varios widgets, cada uno mostrando datos de diferentes fuentes. Se puede usar Suspense anidado para cargar cada widget de forma independiente. Esto permite al usuario ver los widgets disponibles mientras que otros todavía se están cargando, creando una experiencia más receptiva e interactiva.

Ejemplo: Página de producto de comercio electrónico

Analicemos cómo podrías implementar Suspense anidado en una página de producto de comercio electrónico:

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

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Cargando detalles del producto...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Cargando reseñas del producto...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Cargando productos relacionados...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

En este ejemplo, cada sección de la página del producto (detalles del producto, reseñas y productos relacionados) está envuelta en su propio límite de Suspense. Esto permite que cada sección se cargue de forma independiente, proporcionando una experiencia de usuario más receptiva. También podrías considerar usar un componente de skeleton personalizado como fallback para cada sección para proporcionar un indicador de carga más atractivo visualmente.

Mejores prácticas y consideraciones

Cuando trabajes con React Suspense y la gestión de carga anidada, es importante tener en cuenta las siguientes mejores prácticas:

• Mantén los límites de Suspense pequeños: Los límites de Suspense más pequeños permiten un control de carga más granular y una mejor experiencia de usuario. Evita envolver grandes secciones de tu aplicación en un solo límite de Suspense.
• Utiliza componentes de fallback personalizados: Reemplaza los mensajes de texto simples con indicadores de carga visualmente atractivos e informativos, como skeletons, spinners o barras de progreso.
• Maneja los errores con elegancia: Utiliza límites de error para detectar errores que ocurran durante el proceso de carga y mostrar un mensaje de error fácil de usar.
• Optimiza la obtención de datos: Utiliza bibliotecas de obtención de datos como swr o react-query para simplificar la obtención y el almacenamiento en caché de datos.
• Considera el rendimiento: Evita el anidamiento excesivo de componentes Suspense, ya que esto puede afectar el rendimiento. Utiliza debouncing y throttling para limitar la cantidad de veces que un componente intenta cargar datos.
• Prueba tus estados de carga: Prueba exhaustivamente tus estados de carga para garantizar que proporcionen una buena experiencia de usuario en diferentes condiciones de red.

Conclusión

React Suspense proporciona una forma poderosa y declarativa de manejar los estados de carga en tus aplicaciones. Al comprender cómo componer los estados de carga de manera efectiva, especialmente a través de Suspense anidado, puedes crear experiencias de usuario más atractivas y receptivas. Al seguir las mejores prácticas descritas en este artículo, puedes dominar React Suspense y construir aplicaciones robustas y de alto rendimiento que manejen con elegancia las dependencias asíncronas.

Recuerda priorizar la experiencia del usuario, proporcionar indicadores de carga informativos y manejar los errores con elegancia. Con una planificación e implementación cuidadosas, React Suspense puede ser una herramienta valiosa en tu arsenal de desarrollo front-end.

Al adoptar estas técnicas, puedes asegurarte de que tus aplicaciones proporcionen una experiencia fluida y encantadora para los usuarios de todo el mundo, independientemente de su ubicación o condiciones de red.