import React, { Suspense } from 'react';

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

function App() {
 return (
 Carregando...

Neste exemplo:

• React.lazy é usado para carregar MyComponent preguiçosamente.
• Suspense envolve LazyComponent.
• A prop fallback fornece uma UI de fallback (um indicador de carregamento) que é exibida enquanto MyComponent está carregando.

Implementando Error Boundaries

Enquanto o Suspense lida com estados de carregamento, Error Boundaries são componentes React que interceptam erros JavaScript em qualquer lugar de sua árvore de componentes filhos, registram esses erros e exibem uma UI de fallback em vez de travar toda a árvore de componentes.

Como os Error Boundaries Funcionam

Error Boundaries são componentes de classe que definem os seguintes métodos de ciclo de vida:

• static getDerivedStateFromError(error): Este método é invocado depois que um erro foi lançado por um componente descendente. Ele recebe o erro que foi lançado como argumento e deve retornar um valor para atualizar o estado.
• componentDidCatch(error, info): Este método é invocado depois que um erro foi lançado por um componente descendente. Ele recebe o erro e um objeto info contendo informações sobre qual componente lançou o erro. Este é o local ideal para registrar o erro em um serviço como Sentry ou Bugsnag.

Importante: Error Boundaries só capturam erros nos componentes abaixo deles na árvore. Um Error Boundary não pode capturar um erro dentro de si mesmo.

Exemplo: Implementação 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) {
 // Atualiza o estado para que a próxima renderização mostre a UI de fallback.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // Você também pode registrar o erro em um serviço de relatório de erros
 console.error('Erro capturado: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // Você pode renderizar qualquer UI de fallback personalizada
 return 
Algo deu errado.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Para usar o Error Boundary, envolva qualquer componente que possa lançar um erro:

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

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrando Suspense e Error Boundaries

O verdadeiro poder vem da combinação de Suspense e Error Boundaries. Isso permite lidar com estados de carregamento e erros de forma elegante em sua aplicação. A prática recomendada é envolver o Suspense com um Error Boundary. Dessa forma, se o componente que está sendo carregado preguiçosamente falhar ao carregar (por exemplo, erro de rede), o Error Boundary pode capturar o erro e exibir uma mensagem útil para o usuário.

Exemplo: Combinando Suspense e Error Boundaries

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

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

function App() {
 return (
 
 Carregando...