Padrão

Suspense Boundaries

Múltiplos Suspense próximos dos dados = loading independente por área, sem bloquear a página.

Definição

Suspense é um componente que captura promises que ainda não resolveram, mostrando um fallback (skeleton, spinner) até que resolvam. Funciona com lazy loading, RSC streaming e libs como React Query (com suspense:true).

Problema → Solução

Problema

Um único Suspense no topo bloqueia a página inteira enquanto qualquer componente carrega.

Solução

Colocar Suspense ao redor de cada área que carrega dados — granularidade máxima.

Dica de entrevista

Tip

Cada Suspense boundary = área independente. Mais granular = melhor UX. Nunca um só no topo.

Código

<Layout>
  <Suspense fallback={<HeaderSkeleton />}>
    <Header />
  </Suspense>

  <Suspense fallback={<FeedSkeleton />}>
    <Feed />
  </Suspense>

  <Suspense fallback={<SidebarSkeleton />}>
    <Sidebar />
  </Suspense>
</Layout>

Perguntas de entrevista

Q.Como Suspense detecta que está esperando?▾

A.Componentes filhos 'lançam' uma Promise (throw promise). Suspense captura via try/catch interno do React e renderiza o fallback até a Promise resolver. Libs como React Query e RSC fazem isso por baixo dos panos.

Q.Suspense funciona com fetch tradicional em useEffect?▾

A.Não diretamente. Suspense precisa de uma fonte que 'suspenda' (lance Promise). Para useEffect tradicional, você implementa loading manual. Para Suspense, use libs (React Query, SWR, Relay) ou RSC.

Q.O que acontece se um Suspense falha?▾

A.Suspense só lida com loading. Pra erros, combine com ErrorBoundary. O padrão é: <ErrorBoundary><Suspense fallback={...}>...</Suspense></ErrorBoundary>

Termos relacionados

5/122← →