Como Suspense e React.lazy funcionam para code splitting?

Question

Accepted Answer

**`React.lazy`** carrega o bundle JavaScript de um componente **sob demanda** (apenas quando ele é renderizado pela primeira vez). **`Suspense`** mostra uma UI substituta enquanto qualquer filho lazy (ou suspenso em dados) ainda está carregando. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Por que isso importa Sem code splitting, o navegador baixa **toda** a aplicação (incluindo a pesada biblioteca de gráficos) antes de mostrar qualquer coisa. Com `lazy`, o código de `Chart` é dividido em seu próprio arquivo e buscado apenas quando o usuário realmente o alcança — melhorando o tempo de carregamento inicial e Core Web Vitals. ## Como Suspense coordena isso Quando `Chart` suspende (seu bundle não está pronto), React "pausa" essa parte da árvore e renderiza o fallback mais próximo de `Suspense` em seu lugar, depois substitui o componente real assim que ele carrega. Um único limite pode envolver vários filhos lazy e mostrar um fallback: ```jsx }>

``` ## Além do code splitting Suspense também coordena **carregamento de dados** com frameworks/bibliotecas que "suspendem" em uma busca pendente, e se emparelha com **SSR de streaming** (Next.js App Router) para enviar um shell rápido e transmitir partes mais lentas. Coloque os limites cuidadosamente para evitar grandes mudanças de layout perturbadoras quando o conteúdo aparece.