segunda-feira 30 setembro 2024

Como lidar com o carregamento de componentes com Suspense no React

O que é o Suspense no React e como ele funciona?

O componente Suspense do React foi projetado para gerenciar o carregamento de componentes que são renderizados de maneira diferida ou assíncrona. Normalmente, é usado junto com React.lazy para dividir o código em fragmentos que são carregados sob demanda. Isso significa que, ao utilizar Suspense, o React pode exibir um estado de "carregamento" (por exemplo, um spinner) enquanto espera que um componente seja completamente carregado.

Implementação básica

1. Importar Suspense e lazy: É necessário importar ambos os módulos do React.

2. Usar React.lazy para envolver componentes: Isso permite carregar componentes de maneira diferida.

3. Usar Suspense para definir o fallback: O fallback é o conteúdo exibido enquanto o componente está em processo de carregamento.

Exemplos de uso de Suspense no React

Carregamento de um componente diferido com React.lazy

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

// Carregar um componente de forma diferida
const MeuComponente = lazy(() => import('./MeuComponente'));

function App() {
  return (
    <div>
      <h1>Minha Aplicação</h1>
      {/* Mostrar um spinner enquanto MeuComponente é carregado */}
      <Suspense fallback={<div>Carregando...</div>}>
        <MeuComponente />
      </Suspense>
    </div>
  );
}

export default App;

Suspense em combinação com React Router

Suspense também pode ser usado para gerenciar o carregamento de rotas no React Router, melhorando a experiência do usuário ao alternar entre páginas.

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

// Carregamento diferido de componentes
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

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

export default App;

Referência oficial

Você pode consultar mais informações sobre Suspense na documentação oficial do React.

Tags:

react javascript

Criado por:

Jorge García

Fullstack developer