Performance do React

Padrões de otimização de performance para React 18/19 e Next.js, adaptados de Vercel Labs react-best-practices (MIT, v1.0.0). Esta habilidade organiza regras por prioridade e fornece orientação em árvore de decisão para revisão ativa de código e refatoração.

Quando Ativar

• Escrevendo ou revisando código React/Next.js para performance
• Diagnosticando carregamentos lentos de página, interações lentas ou alto uso de CPU no cliente
• Auditando o tamanho do bundle ou regressões nos Core Web Vitals do Lighthouse
• Removendo "waterfalls" (quedas) em Server Components / rotas de API
• Reduzindo re-renderizações no lado do cliente
• Otimizando listas longas, animações ou hidratação
• Auditando escolhas de otimização em PRs que tocam em app/, pages/, components/ ou camadas de dados

Índice de Prioridade

1. Eliminação de "Waterfalls" (CRÍTICA)

"Waterfalls são o principal assassino de performance" — cada await sequencial adiciona latência total de rede.

Condições baratas antes do await

Verifique condições síncronas (props, env, flags fixas) antes de esperar por dados remotos.

// INCORRECT
async function Page({ id }: { id: string }) {
  const flag = await getFlag("show-page");
  if (!flag || !id) return null;
  const data = await getData(id);
  // ...
}

// CORRECT — short-circuit on cheap sync condition first
async function Page({ id }: { id: string }) {
  if (!id) return null;
  const flag = await getFlag("show-page");
  if (!flag) return null;
  const data = await getData(id);
}

Adie awaits até serem usados

Mova await para o branch que o utiliza.

// INCORRECT — awaits before deciding it needs the data
const user = await getUser(id);
if (mode === "guest") return renderGuest();
return renderUser(user);

// CORRECT
if (mode === "guest") return renderGuest();
const user = await getUser(id);
return renderUser(user);

Promise.all para trabalho independente

// INCORRECT — sequential
const user = await getUser(id);
const posts = await getPosts(id);
const followers = await getFollowers(id);

// CORRECT — parallel
const [user, posts, followers] = await Promise.all([
  getUser(id),
  getPosts(id),
  getFollowers(id),
]);

Dependências parciais — comece cedo, espere tarde

// CORRECT — kick off all promises, await only when each result is needed
const userP = getUser(id);
const postsP = getPosts(id);
const profile = await getProfile(id);
if (profile.private) return null;
const [user, posts] = await Promise.all([userP, postsP]);

Suspense para streaming

Empurre os limites de <Suspense> para perto dos dados, para que a página pinte o que puder enquanto sub-árvores mais lentas fazem streaming. O trade-off: mudança de layout quando o conteúdo chega — reserve espaço (esqueleto ou min-height).

Server Components: paralelismo através de composição

// INCORRECT — sibling awaits run sequentially inside one component
export default async function Page() {
  const user = await getUser();
  const cart = await getCart();
  return <View user={user} cart={cart} />;
}

// CORRECT — split into children, React runs them in parallel
export default async function Page() {
  return (
    <View>
      <UserSection />
      <CartSection />
    </View>
  );
}

2. Otimização de Tamanho do Bundle (CRÍTICA)

Imports diretos, não "barrels"

Arquivos "barrel" index.ts forçam o bundler a percorrer todo o grafo de módulos, mesmo quando o tree-shaking remove a maior parte. Imports diretos economizam 200-800ms de JS de primeira carga em muitos aplicativos do mundo real.

// INCORRETO
import { Button, Card, Modal } from "@/components";

// CORRETO
import { Button } from "@/components/Button";
import { Card } from "@/components/Card";

…