import React, { Suspense } from 'react';

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

function App() {
 return (
 Cargando...

En este ejemplo:

• React.lazy se utiliza para cargar de forma diferida MyComponent.
• Suspense envuelve LazyComponent.
• La propiedad fallback proporciona una interfaz de usuario de respaldo (un indicador de carga) que se muestra mientras MyComponent se está cargando.

Implementando Error Boundaries

Mientras que Suspense maneja los estados de carga, los Error Boundaries son componentes de React que capturan errores de JavaScript en cualquier parte de su árbol de componentes hijo, registran esos errores y muestran una interfaz de usuario de respaldo en lugar de bloquear todo el árbol de componentes.

Cómo funcionan los Error Boundaries

Los Error Boundaries son componentes de clase que definen los siguientes métodos del ciclo de vida:

• static getDerivedStateFromError(error): Este método se invoca después de que un componente descendiente haya lanzado un error. Recibe el error que se lanzó como un argumento y debe devolver un valor para actualizar el estado.
• componentDidCatch(error, info): Este método se invoca después de que un componente descendiente haya lanzado un error. Recibe el error y un objeto de información que contiene información sobre qué componente lanzó el error. Este es el lugar ideal para registrar el error en un servicio como Sentry o Bugsnag.

Importante: Los Error Boundaries solo capturan errores en los componentes debajo de ellos en el árbol. Un Error Boundary no puede capturar un error dentro de sí mismo.

Ejemplo: Implementación básica de 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 el siguiente renderizado muestre la interfaz de usuario de respaldo.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // También puedes registrar el error en un servicio de informes de errores
 console.error('Error detectado: ', error, info);
 }

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

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Para usar el Error Boundary, envuelve cualquier componente que pueda lanzar un error:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrando Suspense y Error Boundaries

El verdadero poder proviene de la combinación de Suspense y Error Boundaries. Esto te permite manejar tanto los estados de carga como los errores con elegancia dentro de tu aplicación. La práctica recomendada es envolver Suspense con un Error Boundary. De esta manera, si el componente que se está cargando de forma diferida no se carga (por ejemplo, error de red), el Error Boundary puede capturar el error y mostrar un mensaje útil al usuario.

Ejemplo: Combinando Suspense y Error Boundaries

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

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

function App() {
 return (
 
 Cargando...