React.lazy React.lazy: Divisão de Código

Última atualização: 2026-11-03

React.lazy React.lazy: Divisão de Código

React.lazy(() => import('./Page')) transforma um componente em um chunk baixado apenas quando realmente necessário, e Suspense mostra uma UI reserva enquanto o chunk está em trânsito. A primeira pintura então envia apenas o código da página inicial e todas as outras rotas são buscadas sob demanda, que é a primeira grande vitória para a velocidade de uma single-page app e a mais fácil de medir.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { lazy, Suspense } from 'react'

const AdminPage = lazy(() => import('./AdminPage'))  // dynamic import splits the bundle

<Suspense fallback={<p>Loading…</p>}>
  <AdminPage />   {/* the chunk is requested at render time and replaces the fallback once ready */}
</Suspense>

⚙️ Parâmetros

Retorna：lazy(factory) retorna um novo componente: o módulo começa a carregar na primeira renderização e, até resolver, lança para o limite Suspense mais próximo para que ele possa mostrar seu fallback.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar no botão mostra um espaço reservado "baixando" por 1,2 segundo e então troca para o conteúdo carregado — a transição do fallback para o componente lazy do Suspense (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Roteamento e Estado

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós