import React, { Suspense } from 'react';

// Simular la obtención de datos (por ejemplo, de una API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Crear un recurso que Suspense puede usar
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;
    },
  };
};

const userData = createResource(fetchData);

// Componente que lee del recurso
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Nombre: {data.name}
      
Edad: {data.age}
    
  );
};

const App = () => {
  return (
    Cargando datos de usuario...

En este ejemplo:

• `fetchData` simula una operación de obtención de datos asíncrona.
• `createResource` crea un recurso que Suspense puede usar para rastrear el estado de carga de los datos.
• `UserProfile` lee datos del recurso usando el método `read`. Si los datos aún no están disponibles, lanza una promesa, lo que suspende el componente.
• El componente `Suspense` envuelve `UserProfile` y proporciona una propiedad `fallback`, que especifica la interfaz de usuario que se mostrará mientras el componente está suspendido.

Suspense con Code Splitting

Suspense también se puede usar con React.lazy para implementar la división de código. Esto le permite cargar componentes solo cuando se necesitan, mejorando el rendimiento de la carga inicial de la página.

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

// Cargar perezosamente el componente MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Cargando componente...}>
      
    
  );
};

export default App;

En este ejemplo:

• `React.lazy` se usa para cargar perezosamente el componente `MyComponent`.
• El componente `Suspense` envuelve `MyComponent` y proporciona una propiedad `fallback`, que especifica la interfaz de usuario que se mostrará mientras el componente se está cargando.

Entendiendo Error Boundaries

Error Boundaries son componentes de React que capturan errores de JavaScript en cualquier lugar de su árbol de componentes secundarios, registran esos errores y muestran una interfaz de usuario de respaldo en lugar de bloquear toda la aplicación. Proporcionan una forma de manejar elegantemente los errores inesperados, mejorando la experiencia del usuario y haciendo que su aplicación sea más robusta.

Conceptos clave de Error Boundaries

• Captura de errores: Error Boundaries capturan errores durante la renderización, en los métodos del ciclo de vida y en los constructores de todo el árbol debajo de ellos.
• Fallback UI: La interfaz de usuario que se muestra cuando ocurre un error. Esto suele ser un mensaje de error o un marcador de posición.
• Registro de errores: Error Boundaries le permiten registrar errores en un servicio o consola con fines de depuración.
• Aislamiento del árbol de componentes: Error Boundaries aíslan los errores a partes específicas del árbol de componentes, evitando que bloqueen toda la aplicación.

Implementación básica de Error Boundaries

Aquí hay un ejemplo simple de cómo crear un Error Boundary:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Actualiza el estado para que la siguiente renderización muestre la interfaz de usuario de respaldo.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // También puede registrar el error en un servicio de informes de errores
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Puede renderizar cualquier interfaz de usuario de respaldo personalizada
      return 
Algo salió mal.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

En este ejemplo:

• El componente `ErrorBoundary` define los métodos `getDerivedStateFromError` y `componentDidCatch`.
• `getDerivedStateFromError` se llama cuando ocurre un error en un componente secundario. Actualiza el estado para indicar que ha ocurrido un error.
• `componentDidCatch` se llama después de que se ha capturado un error. Le permite registrar el error en un servicio o consola.
• El método `render` verifica el estado `hasError` y muestra una interfaz de usuario de respaldo si ha ocurrido un error.

Usando Error Boundaries

Para usar el componente `ErrorBoundary`, simplemente envuelva los componentes que desea proteger con él:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Simular un error
  throw new Error('¡Ocurrió un error!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

En este ejemplo, si ocurre un error en `MyComponent`, el componente `ErrorBoundary` capturará el error y mostrará la interfaz de usuario de respaldo.

Combinando Suspense y Error Boundaries

Suspense y Error Boundaries se pueden combinar para proporcionar una estrategia de manejo de errores robusta y completa para operaciones asíncronas. Al envolver componentes que podrían suspenderse con Suspense y Error Boundaries, puede manejar tanto los estados de carga como los errores inesperados con elegancia.

Ejemplo de combinación de Suspense y Error Boundaries

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Simular la obtención de datos (por ejemplo, de una API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Simular una obtención de datos exitosa
      // resolve({ name: 'John Doe', age: 30 });

      // Simular un error durante la obtención de datos
      reject(new Error('Error al obtener los datos del usuario'));

    }, 2000);
  });
};

// Crear un recurso que Suspense puede usar
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;
    },
  };
};

const userData = createResource(fetchData);

// Componente que lee del recurso
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Nombre: {data.name}
      
Edad: {data.age}
    
  );
};

const App = () => {
  return (
    
      Cargando datos de usuario...}>
        
      
    
  );
};

export default App;

En este ejemplo:

• El componente `ErrorBoundary` envuelve el componente `Suspense`.
• El componente `Suspense` envuelve el componente `UserProfile`.
• Si la función `fetchData` rechaza con un error, el componente `Suspense` capturará el rechazo de la promesa, y el `ErrorBoundary` capturará el error lanzado por Suspense.
• El `ErrorBoundary` mostrará entonces la interfaz de usuario de respaldo.
• Si los datos se obtienen con éxito, el componente `Suspense` mostrará el componente `UserProfile`.

Técnicas avanzadas y mejores prácticas

Optimización del rendimiento de Suspense

• Usar Memoization: Memorizar componentes que se renderizan dentro de los límites de Suspense para evitar re-renderizados innecesarios.
• Evitar árboles de Suspense profundos: Mantener el árbol de Suspense poco profundo para minimizar el impacto en el rendimiento de la renderización.
• Prefetch Data: Obtener previamente los datos antes de que se necesiten para reducir la probabilidad de suspensión.

Error Boundaries personalizadas

Puede crear Error Boundaries personalizadas para manejar tipos específicos de errores o para proporcionar mensajes de error más informativos. Por ejemplo, puede crear un Error Boundary que muestre una interfaz de usuario de respaldo diferente según el tipo de error que ocurrió.

Renderización del lado del servidor (SSR) con Suspense

Suspense se puede usar con la renderización del lado del servidor (SSR) para mejorar el rendimiento de la carga inicial de la página. Cuando usa SSR, puede pre-renderizar el estado inicial de su aplicación en el servidor y luego transmitir el contenido restante al cliente. Suspense le permite manejar la obtención de datos asíncrona durante SSR y mostrar indicadores de carga mientras se transmiten los datos.

Manejo de diferentes escenarios de error

Considere estos diferentes escenarios de error y cómo manejarlos:

• Errores de red: Maneje los errores de red con elegancia mostrando un mensaje de error informativo al usuario.
• Errores de API: Maneje los errores de API mostrando un mensaje de error que sea específico del error que ocurrió.
• Errores inesperados: Maneje los errores inesperados registrando el error y mostrando un mensaje de error genérico al usuario.

Manejo global de errores

Implemente un mecanismo global de manejo de errores para capturar errores que no son capturados por Error Boundaries. Esto se puede hacer usando un controlador de errores global o envolviendo toda la aplicación en un Error Boundary.

Ejemplos del mundo real y casos de uso

Aplicación de comercio electrónico

En una aplicación de comercio electrónico, Suspense se puede usar para mostrar indicadores de carga mientras se obtienen datos de productos, y Error Boundaries se pueden usar para manejar los errores que ocurren durante el proceso de pago. Por ejemplo, imagine a un usuario de Japón navegando por una tienda en línea ubicada en los Estados Unidos. Las imágenes y descripciones de los productos podrían tardar un tiempo en cargarse. Suspense puede mostrar una simple animación de carga mientras estos datos se obtienen de un servidor posiblemente en la otra punta del mundo. Si la pasarela de pago falla debido a un problema de red temporal (común en diferentes infraestructuras de Internet a nivel mundial), un Error Boundary podría mostrar un mensaje amigable al usuario solicitándole que intente nuevamente más tarde.

Plataforma de redes sociales

En una plataforma de redes sociales, Suspense se puede usar para mostrar indicadores de carga mientras se obtienen perfiles y publicaciones de usuarios, y Error Boundaries se pueden usar para manejar los errores que ocurren al cargar imágenes o videos. Un usuario que navega desde India podría experimentar tiempos de carga más lentos para los medios alojados en servidores en Europa. Suspense puede mostrar un marcador de posición hasta que el contenido se cargue por completo. Si los datos del perfil de un usuario en particular están corruptos (raro pero posible), un Error Boundary puede evitar que todo el feed de redes sociales se bloquee, mostrando un simple mensaje de error como "No se puede cargar el perfil del usuario" en su lugar.

Aplicación de panel de control

En una aplicación de panel de control, Suspense se puede usar para mostrar indicadores de carga mientras se obtienen datos de múltiples fuentes, y Error Boundaries se pueden usar para manejar los errores que ocurren al cargar gráficos. Un analista financiero en Londres que accede a un panel de control de inversión global podría estar cargando datos de múltiples bolsas de todo el mundo. Suspense puede proporcionar indicadores de carga para cada fuente de datos. Si la API de una bolsa está inactiva, un Error Boundary puede mostrar un mensaje de error específicamente para los datos de esa bolsa, evitando que todo el panel de control se vuelva inutilizable.

Conclusión

React Suspense y Error Boundaries son herramientas esenciales para construir aplicaciones React resilientes y fáciles de usar. Al usar Suspense para administrar los estados de carga y Error Boundaries para manejar errores inesperados, puede mejorar la experiencia general del usuario y simplificar el proceso de desarrollo. Esta guía ha proporcionado una descripción general completa de Suspense y Error Boundaries, cubriendo todo, desde conceptos básicos hasta técnicas avanzadas. Al seguir las mejores prácticas descritas en este artículo, puede construir aplicaciones React robustas y confiables que pueden manejar incluso los escenarios más desafiantes.

A medida que React continúa evolucionando, es probable que Suspense y Error Boundaries desempeñen un papel cada vez más importante en la construcción de aplicaciones web modernas. Al dominar estas funciones, puede mantenerse a la vanguardia y ofrecer experiencias de usuario excepcionales.