# Lazy loading: o que é e como implementar em React

> Lazy loading é uma técnica de otimização que adia o carregamento de recursos até o momento em que são necessários. Em React, a implementação utiliza React.lazy() e Suspense para dividir o bundle e carregar componentes sob demanda, reduzindo o tempo de carregamento inicial. A prática melhora a performance de aplicações com muitos componentes ou rotas.

*TNT Web · Apps e Software · 31 de agosto de 2026 · Eloá Pimentel*

Lazy loading adia o carregamento de recursos até que sejam necessários. Em React, isso significa dividir o bundle e carregar componentes sob demanda. Veja como fazer.

Lazy loading é uma estratégia de performance que adia o carregamento de recursos não críticos até que o usuário realmente precise deles. Em vez de baixar tudo de uma vez, o navegador carrega apenas o essencial e busca o restante sob demanda. Em React, isso é feito com React.lazy e Suspense, que permitem dividir o bundle em partes menores e carregá-las apenas quando necessário, reduzindo o tempo de carregamento inicial e melhorando a experiência em conexões mais lentas.

## Por que usar lazy loading?

O principal motivo é a velocidade. Quando um site carrega todos os scripts, imagens e estilos de uma vez, o usuário espera mais tempo para ver algo útil. Com lazy loading, o conteúdo acima da dobra aparece quase imediatamente, enquanto o resto é carregado em segundo plano ou quando o usuário rola a página.

Isso é especialmente importante em aplicações React, que podem gerar bundles pesados. Um bundle de 500 KB pode parecer pouco, mas em uma conexão 3G, isso significa vários segundos de espera. Com code splitting, você reduz o bundle inicial para o mínimo necessário e carrega o restante conforme a navegação.

Outro benefício é a economia de dados. Usuários que não acessam certas seções não precisam baixar seus recursos. Em dispositivos móveis, isso faz diferença real, tanto em tempo quanto em bateria.

## Como funciona o lazy loading em React?

React oferece duas ferramentas nativas: React.lazy e Suspense. React.lazy recebe uma função que retorna uma promessa, geralmente uma chamada dinâmica de import(). O componente só é carregado quando é renderizado pela primeira vez.

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

Suspense é o componente que envolve o componente lazy. Ele mostra um fallback (como um spinner) enquanto o componente é carregado.

import React, { Suspense } from 'react';

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

function App() { return ( Carregando...}> ); }

O fallback pode ser qualquer elemento React, desde um texto simples até um componente de loading completo.

## Quando usar lazy loading em React?

Nem todo componente precisa ser lazy. A regra prática é: use para componentes que não são vistos imediatamente na tela. Isso inclui modais, abas, rotas secundárias, gráficos e qualquer coisa que dependa de interação do usuário.

Evite usar para componentes críticos da primeira renderização. Se o componente aparece logo no carregamento, o lazy loading só adiciona latência. Um exemplo: um header ou um formulário de login não devem ser lazy.

Também vale considerar o tamanho do componente. Um componente de 2 KB não traz benefício em ser dividido. O overhead da requisição extra pode até piorar a performance. Componentes grandes, como bibliotecas de gráficos ou editores de texto, são candidatos ideais.

## Lazy loading com React Router

Um dos usos mais comuns é com React Router. Em vez de importar todas as páginas de uma vez, você pode usar React.lazy em cada rota. Isso reduz o bundle inicial drasticamente, especialmente em aplicações com muitas páginas.

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

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

function App() { return ( Carregando página...}> } /> } /> ); }

Com essa abordagem, cada rota só é baixada quando o usuário a acessa. Em uma aplicação com 20 páginas, o usuário que entra na Home não baixa o código das outras 19.

## Lazy loading para imagens em React

Além de componentes, imagens também podem ser carregadas sob demanda. O atributo loading="lazy" funciona nativamente em navegadores modernos e pode ser usado diretamente em elementos img.

O navegador só carrega a imagem quando ela está prestes a entrar na viewport. Isso é útil para galerias, feeds e qualquer página com muitas imagens.

Para imagens de fundo em CSS, não há atributo nativo. Nesse caso, você pode usar uma biblioteca como react-lazyload ou implementar uma solução com IntersectionObserver. O IntersectionObserver é uma API do navegador que detecta quando um elemento entra na tela.

## Lazy loading com bibliotecas externas

Se você usa bibliotecas pesadas, como Moment.js ou Chart.js, o lazy loading pode ser aplicado no momento do import. Em vez de importar no topo do arquivo, você faz o import dinâmico dentro de uma função.

async function loadChart() { const { Chart } = await import('chart.js'); // usar Chart aqui }

Isso faz com que a biblioteca só seja baixada quando a função é chamada. Em aplicações com dashboards, isso pode reduzir o bundle inicial em centenas de kilobytes.

Uma ressalva: bibliotecas que são usadas em várias partes da aplicação podem se beneficiar de um chunk separado, mas o React.lazy não é a única ferramenta. O webpack, que é o bundler padrão do React, também permite configurar manualmente os pontos de divisão.

## Erros comuns ao implementar lazy loading

Um erro frequente é esquecer o Suspense. Sem ele, o React lança um erro e a aplicação quebra. O fallback é obrigatório quando você usa React.lazy.

Outro erro é usar lazy loading em componentes que são renderizados no servidor (SSR). O React.lazy não é suportado em renderização no servidor sem bibliotecas adicionais, como Loadable Components. Se você usa Next.js, por exemplo, o lazy loading é feito com dynamic() do próprio Next.

Também é comum exagerar no fallback. Um spinner em cada seção pode deixar a interface nervosa. Prefira um fallback sutil, como um esqueleto de carregamento ou até um texto simples.

## Lazy loading vs code splitting

Lazy loading e code splitting são conceitos relacionados, mas não idênticos. Code splitting é a técnica de dividir o código em arquivos menores. Lazy loading é a estratégia de carregar esses arquivos sob demanda. Você pode ter code splitting sem lazy loading, mas lazy loading geralmente envolve code splitting.

Em React, o React.lazy combina os dois: o import() dinâmico cria um chunk separado, e o React.lazy só renderiza esse chunk quando necessário.

## Como medir o impacto do lazy loading

Para saber se o lazy loading está funcionando, você pode usar o painel de rede do DevTools. Antes da implementação, anote o tamanho do bundle inicial. Depois, compare. Você também pode usar o Lighthouse, do Chrome, que gera uma pontuação de performance e sugere melhorias.

Outra métrica importante é o Time to Interactive (TTI). O lazy loading tende a reduzir esse tempo, porque o JavaScript inicial é menor. O usuário consegue interagir com a página mais cedo, mesmo que algumas funcionalidades ainda estejam carregando.

Lembre-se de que o lazy loading não é uma bala de prata. Ele adiciona complexidade, e em aplicações pequenas pode não fazer diferença perceptível. A decisão deve ser baseada em medição, não em suposição.

## Resumo

Lazy loading é uma estratégia para carregar recursos apenas quando necessários. Em React, React.lazy e Suspense são as ferramentas padrão. Use para componentes não críticos, rotas e bibliotecas pesadas. Meça o impacto antes e depois.

## Perguntas frequentes

### O que é lazy loading?

Lazy loading é um padrão de projeto que adia a inicialização de um objeto até o ponto em que ele é necessário. Em desenvolvimento web, significa carregar recursos como imagens, scripts e componentes apenas quando o usuário vai precisar deles, em vez de carregar tudo no início.

### Como implementar lazy loading em React?

Use React.lazy com import() dinâmico para definir o componente e Suspense para mostrar um fallback enquanto ele carrega. Envolva o componente lazy com Suspense no ponto de renderização. Para rotas, combine com React Router.

### Qual a diferença entre lazy loading e code splitting?

Code splitting é a técnica de dividir o código em arquivos menores. Lazy loading é a estratégia de carregar esses arquivos sob demanda. Eles são frequentemente usados juntos, mas code splitting pode existir sem lazy loading.

### Lazy loading funciona com Next.js?

Sim, mas o Next.js usa sua própria API chamada dynamic(), que é semelhante ao React.lazy, mas funciona com SSR. O React.lazy padrão não é suportado em renderização no servidor.

### Lazy loading pode prejudicar a performance?

Em excesso, sim. Se você dividir componentes muito pequenos, o overhead de múltiplas requisições pode ser maior que o benefício. Use lazy loading para componentes grandes e não críticos, e meça o impacto real.

### O atributo loading="lazy" funciona em todos os navegadores?

O atributo loading="lazy" para imagens é suportado na maioria dos navegadores modernos, incluindo Chrome, Firefox e Edge. Navegadores mais antigos ignoram o atributo e carregam a imagem normalmente, sem quebrar a página.

---

Fonte (canonical): https://tntweb.com.br/apps-e-software/lazy-loading-o-que-e-e-como-implementar-em-react/