Guia para carregamento lento com React

Introdução

Ao desenvolver grandes aplicativos React, normalmente usamos muitas imagens e vídeos, instalamos pacotes/bibliotecas de terceiros, fazemos chamadas de API e fazemos uma variedade de outras coisas. Isso naturalmente aumenta o tempo necessário para carregar nosso aplicativo e resulta em um tamanho de pacote enorme, o que contribui para uma experiência ruim do usuário. Isso e onde carregamento lento entra no lugar. Ele nos permite carregar o conteúdo na hora certa, logo antes de ser exibido no aplicativo.

Podemos evitar o pré-carregamento de conteúdo enquanto ele ainda está fora de exibição e focar todos os recursos no conteúdo que está na exibição.

Neste guia, veremos como usar React.lazy() e React.Suspense para implementar a funcionalidade de carregamento lento e divisão de código que nos permite lidar com a divisão de código sem a necessidade de instalar bibliotecas adicionais.

O que é Lazy Loading?

Quando iniciamos um aplicativo da Web React, ele geralmente agrupa todo o aplicativo de uma só vez, carregando tudo, incluindo as páginas inteiras do aplicativo da Web, imagens, conteúdo e muito mais para nós, potencialmente resultando em um tempo de carregamento lento e baixo desempenho geral, dependendo do o tamanho do conteúdo e a largura de banda da Internet no momento.

Carregamento lento nos permite carregar componentes específicos apenas quando eles são necessários. Normalmente, também realizamos divisão de código em componentes lógicos que também podem ser carregados lentamente com o conteúdo.

Por exemplo, se tivermos uma página de painel que exibe muitas informações de várias fontes quando clicadas, é sempre melhor manter esses componentes e páginas com carregamento lento, para que sejam carregados apenas quando necessário ou exigido pelo usuário.

Observação: O processo de despejar um grande pacote de código em vários pacotes que podem ser carregados dinamicamente com o objetivo geral de evitar problemas de desempenho associados a pacotes superdimensionados é conhecido como divisão de código. Isso é feito sem reduzir a quantidade de código em nosso aplicativo.

Em resumo, o carregamento lento nos permite renderizar componentes ou elementos sob demanda, tornando nosso aplicativo mais eficiente e proporcionando uma melhor experiência ao usuário.

Observação: Aplicativos de página única (SPAs) são projetados para conter todas as páginas e conteúdo em um único documento/página. É por isso que o carregamento lento é especialmente útil ao desenvolver SPAs.

Como implementar o carregamento lento no React

Até agora, vimos o que é o carregamento lento e por que é importante implementá-lo. Agora, vamos ver como podemos implementá-lo em nossos aplicativos React, usando dois recursos do React que facilitam a implementação da divisão de código e do carregamento lento – Reagir.preguiçoso() e Reagir. Suspense.

React.lazy() é uma função que nos permite renderizar importações dinâmicas da mesma forma que os componentes regulares. Usando importações dinâmicas ao lado do React.lazy() nos permitirá importar um componente antes de renderizá-lo em uma tela. Uma coisa importante a notar é que React.lazy() aceita uma função como argumento – essa função deve chamar a função dinâmica import() em seu corpo.

React.Suspense nos permite especificar o fallback mordaça que inclui um conteúdo de espaço reservado que seria usado como indicador de carregamento enquanto todos os componentes preguiçosos são carregados.

Vamos começar analisando como podemos implementar o carregamento lento em nossos componentes importados e, em seguida, como podemos implementá-lo em nossas rotas para que as páginas não sejam carregadas até que naveguemos até elas.

Iniciando

Suponha que temos nosso aplicativo React e importamos o About componente no Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Agora podemos implementar o carregamento lento usando React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Observação: React.lazy() usado desta forma retorna um Promise objeto. Essa promessa resolve para um módulo que contém um componente React que queremos carregar lentamente em seu default exportar.

Implementamos o carregamento lento usando React.lazy(), mas o código acima sempre lançará um erro dizendo que nosso “React component suspended while rendering, but no fallback UI was specified”. Isso pode ser corrigido envolvendo o componente com React.Suspense's fallbackz e anexando os adereços de fallback como explicamos anteriormente:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Observação: A prop de fallback pode levar um componente para mostrar antes que o conteúdo original seja carregado.

Além disso, podemos decidir desestruturar a importação do React para tornar o código mais limpo e legível:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Até agora, vimos como implementar o carregamento lento em nossos componentes importados. Agora, vamos ver como implementá-lo em nossas rotas enquanto roteamos com o roteador React.

Como implementar o carregamento lento com o roteador React

O roteamento lento é, na verdade, uma boa prática para rotas que têm muito conteúdo e podem diminuir o tempo de carregamento do seu aplicativo. Implementar o carregamento lento para rotas React é quase idêntico ao que fizemos anteriormente ao carregar componentes importados dinamicamente de forma lenta.

Lazy loading As rotas do React referem-se à importação dinâmica de um componente somente quando necessário. Por exemplo, digamos que temos duas rotas em nosso aplicativo e dois componentes representando essas rotas. Se implementarmos o roteamento mencionado da seguinte maneira, cada componente será carregado somente quando navegarmos para a rota correspondente:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Conclusão

Neste guia, aprendemos o que são carregamento lento e divisão de código, como implementá-los e que o melhor lugar para implementar carregamento lento é com rotas. Isso evita renderizar a página inteira de uma só vez, o que pode resultar em um tempo de carregamento mais lento ao lidar com páginas com grandes quantidades de conteúdo.