DEV Community

Vitor Rios
Vitor Rios

Posted on

3

Implementando Lazy Loading em Componentes React

Introdução

Lazy loading é uma técnica de otimização que permite carregar componentes sob demanda, apenas quando são necessários. Isso pode melhorar significativamente a performance de uma aplicação React, reduzindo o tempo de carregamento inicial e a quantidade de recursos baixados pelo navegador. Neste artigo, vamos explorar como implementar lazy loading em componentes React utilizando o recurso React.lazy e Suspense.

Benefícios do Lazy Loading

  1. Redução do Tempo de Carregamento Inicial: Carregar apenas os componentes essenciais na inicialização da aplicação reduz o tempo de carregamento.
  2. Melhoria na Performance: Menos recursos são carregados inicialmente, resultando em uma aplicação mais rápida e responsiva.
  3. Melhoria na Experiência do Usuário: Os componentes são carregados conforme o usuário navega pela aplicação, proporcionando uma experiência mais fluida.

Pré-requisitos

Para seguir este tutorial, você precisará de:

  • Conhecimento básico de React.
  • Um projeto React configurado. Se você ainda não tem um, pode criar um usando create-react-app.

Passo 1: Configurando o Projeto

Se você ainda não tem um projeto React, crie um usando create-react-app:

npx create-react-app lazy-loading-example
cd lazy-loading-example
npm start
Enter fullscreen mode Exit fullscreen mode

Passo 2: Criando Componentes para Lazy Loading

Vamos criar alguns componentes de exemplo que serão carregados de forma preguiçosa. No diretório src, crie uma pasta chamada components e adicione dois componentes: Home.js e About.js.

Home.js:

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Component</h1>
      <p>Welcome to the Home Page!</p>
    </div>
  );
};

export default Home;
Enter fullscreen mode Exit fullscreen mode

About.js:

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About Component</h1>
      <p>Welcome to the About Page!</p>
    </div>
  );
};

export default About;
Enter fullscreen mode Exit fullscreen mode

Passo 3: Implementando Lazy Loading

Agora, vamos modificar o App.js para usar lazy loading ao importar esses componentes.

App.js:

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

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </Suspense>
      </div>
    </Router>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Explicação

  1. React.lazy: Utilizamos React.lazy para carregar os componentes Home e About de forma preguiçosa. Isso significa que esses componentes só serão carregados quando forem necessários.
  2. Suspense: Envolvemos nossas rotas com o componente Suspense, que exibe um fallback (<div>Loading...</div>) enquanto o componente preguiçoso está sendo carregado.
  3. Roteamento: Utilizamos react-router-dom para gerenciar a navegação entre os componentes Home e About.

Passo 4: Testando a Implementação

Para testar a implementação, execute o comando npm start para iniciar o servidor de desenvolvimento. Navegue entre as páginas Home e About para ver o efeito do lazy loading.

npm start
Enter fullscreen mode Exit fullscreen mode

Conclusão

Implementar lazy loading em componentes React é uma maneira eficaz de melhorar a performance da sua aplicação, reduzindo o tempo de carregamento inicial e carregando componentes sob demanda. Neste artigo, aprendemos como usar React.lazy e Suspense para implementar lazy loading de forma simples e eficiente.

Benefícios Desta Abordagem

  1. Performance Melhorada: A aplicação carrega mais rapidamente e utiliza menos recursos inicialmente.
  2. Eficiência: Apenas os componentes necessários são carregados, economizando largura de banda e tempo.
  3. Experiência de Usuário Melhorada: A navegação se torna mais fluida e responsiva, com menos tempo de espera para o carregamento de componentes.

Você pode explorar mais sobre lazy loading e outras técnicas de otimização para React na documentação oficial do React: React Documentation.

Espero que este artigo tenha sido útil para você. Se tiver alguma dúvida ou sugestão, sinta-se à vontade para comentar!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay