React Compiler (React Forget) - Memoização automática em tempo de build

Q: Como habilitar o React Compiler em um projeto Next.js?

Instale também o plugin Babel: npm install -D babel-plugin-react-compiler.

Q: Você pode optar por um componente específico fora da otimização do compilador?

Sim. Adicione a diretiva "use no memo" no topo do corpo do componente:

Q: O que faz "use memo" no modo de compilação por anotação?

No modo compilationMode: "annotation", apenas os componentes com a diretiva "use memo" são otimizados pelo compilador. Isso permite a migração gradual optando por componente.

Receita

// Passo 1: Instale o compilador
// npm install -D babel-plugin-react-compiler
 
// Passo 2: Adicione à sua configuração do Next.js (next.config.ts)
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
export default nextConfig;
 
// Passo 3: Remova a memoização manual - o compilador cuida disso
// ANTES: Memoização manual
function ProductList({ products, category }: Props) {
  const filtered = useMemo(
    () => products.filter((p) => p.category === category),
    [products, category]
  );
  const handleClick = useCallback((id: string) => {
    selectProduct(id);
  }, [selectProduct]);
 
  return <MemoizedGrid items={filtered} onClick={handleClick} />;
}
const MemoizedGrid = memo(Grid);
 
// DEPOIS: O compilador auto-memoiza - código mais limpo, mesmo desempenho
function ProductList({ products, category }: Props) {
  const filtered = products.filter((p) => p.category === category);
  const handleClick = (id: string) => selectProduct(id);
 
  return <Grid items={filtered} onClick={handleClick} />;
}

Quando usar isso: Ao iniciar um novo projeto React 19+ ou migrar um existente. O compilador elimina o código boilerplate de useMemo, useCallback e memo, mantendo um desempenho igual ou melhor.

Exemplo de Trabalho

// ---- ANTES: Memoização manual com 15 linhas de boilerplate ----
 
import { memo, useMemo, useCallback, useState } from "react";
 
interface User {
  id: string;
  name: string;
  role: "admin" | "user";
  lastActive: Date;
}
 
function UserDashboard({ users }: { users: User[] }) {
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<"all" | "admin" | "user">("all");
  const [selectedId, setSelectedId] = useState<string | null>(null);
 
  const filteredUsers = useMemo(
    () =>
      users
        .filter((u) => roleFilter === "all" || u.role === roleFilter)
        .filter((u) => u.name.toLowerCase().includes(search.toLowerCase()))
        .sort((a, b) => b.lastActive.getTime() - a.lastActive.getTime()),
    [users, roleFilter, search]
  );
 
  const handleSelect = useCallback((id: string) => {
    setSelectedId(id);
  }, []);
 
  const stats = useMemo(
    () => ({
      total: users.length,
      admins: users.filter((u) => u.role === "admin").length,
      active: users.filter((u) => {
        const hourAgo = Date.now() - 3600_000;
        return u.lastActive.getTime() > hourAgo;
      }).length,
    }),
    [users]
  );
 
  return (
    <div>
      <MemoizedStatsBar stats={stats} />
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <select
        value={roleFilter}
        onChange={(e) => setRoleFilter(e.target.value as "all" | "admin" | "user")}
      >
        <option value="all">All</option>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </select>
      <MemoizedUserList
        users={filteredUsers}
        selectedId={selectedId}
        onSelect={handleSelect}
      />
    </div>
  );
}
 
const MemoizedStatsBar = memo(function StatsBar({
  stats,
}: {
  stats: { total: number; admins: number; active: number };
}) {
  return (
    <div className="flex gap-4">
      <span>Total: {stats.total}</span>
      <span>Admins: {stats.admins}</span>
      <span>Active: {stats.active}</span>
    </div>
  );
});
 
const MemoizedUserList = memo(function UserList({
  users,
  selectedId,
  onSelect,
}: {
  users: User[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <ul>
      {users.map((user) => (
        <li
          key={user.id}
          onClick={() => onSelect(user.id)}
          className={user.id === selectedId ? "bg-blue-100" : ""}
        >
          {user.name} ({user.role})
        </li>
      ))}
    </ul>
  );
});
 
// ---- DEPOIS: React Compiler - mesmo desempenho, zero boilerplate ----
 
function UserDashboard({ users }: { users: User[] }) {
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<"all" | "admin" | "user">("all");
  const [selectedId, setSelectedId] = useState<string | null>(null);
 
  const filteredUsers = users
    .filter((u) => roleFilter === "all" || u.role === roleFilter)
    .filter((u) => u.name.toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => b.lastActive.getTime() - a.lastActive.getTime());
 
  const stats = {
    total: users.length,
    admins: users.filter((u) => u.role === "admin").length,
    active: users.filter((u) => {
      const hourAgo = Date.now() - 3600_000;
      return u.lastActive.getTime() > hourAgo;
    }).length,
  };
 
  return (
    <div>
      <StatsBar stats={stats} />
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <select
        value={roleFilter}
        onChange={(e) => setRoleFilter(e.target.value as "all" | "admin" | "user")}
      >
        <option value="all">All</option>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </select>
      <UserList
        users={filteredUsers}
        selectedId={selectedId}
        onSelect={(id: string) => setSelectedId(id)}
      />
    </div>
  );
}
 
function StatsBar({ stats }: { stats: { total: number; admins: number; active: number } }) {
  return (
    <div className="flex gap-4">
      <span>Total: {stats.total}</span>
      <span>Admins: {stats.admins}</span>
      <span>Active: {stats.active}</span>
    </div>
  );
}
 
function UserList({
  users,
  selectedId,
  onSelect,
}: {
  users: User[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <ul>
      {users.map((user) => (
        <li
          key={user.id}
          onClick={() => onSelect(user.id)}
          className={user.id === selectedId ? "bg-blue-100" : ""}
        >
          {user.name} ({user.role})
        </li>
      ))}
    </ul>
  );
}

O que isso demonstra:

A versão otimizada pelo compilador remove 6 chamadas de hook (useMemo x2, useCallback x1, wrappers memo x2) e 15 linhas de código boilerplate.
O desempenho é equivalente porque o compilador insere a memoização no nível da AST durante o build.
O código é mais legível e fácil de manter sem arrays de dependência manuais.
Nenhuma mudança de comportamento - o compilador apenas adiciona otimizações, nunca altera a semântica.

Mergulho Profundo

Como Funciona

Transformação em tempo de build - O React Compiler é um plugin Babel que analisa o código do seu componente em tempo de build. Ele identifica valores, funções e elementos JSX que podem ser armazenados em cache com segurança entre as renderizações.
Rastreamento automático de dependências - O compilador analisa estaticamente em quais variáveis cada expressão depende e, em seguida, envolve essas expressões em memoização com os arrays de dependência corretos. Isso é mais confiável do que escrever arrays de dependência manualmente.
Memoização em nível de componente - O compilador envolve os valores de retorno dos componentes para que, se as props e o estado não tiverem mudado, o componente pule a renderização completamente. Isso substitui React.memo.
Cache granular - Ao contrário do useMemo manual, que armazena em cache na granularidade que você especifica, o compilador pode armazenar em cache elementos JSX individuais dentro de um componente, potencialmente alcançando uma granularidade melhor do que a otimização escrita manualmente.
Aplicação das Regras do React - O compilador assume que seu código segue as Regras do React (renderização pura, sem mutação durante a renderização, ordem estável de chamadas de hook). Código que viola essas regras pode produzir resultados incorretos quando compilado.

Variações

Optando por sair com a diretiva "use no memo":

// Opta um componente específico fora da otimização do compilador
function DebugPanel({ data }: { data: unknown }) {
  "use no memo";
  // Este componente sempre re-renderiza - útil para depuração
  console.log("DebugPanel renderizado em", Date.now());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Opt-in por arquivo (migração gradual):

// next.config.ts - compila apenas diretórios específicos
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: "annotation",
      // Ou direcione caminhos específicos:
      // include: ["src/components/**"],
    },
  },
};

// Opta pelo nível do componente com "use memo"
function ExpensiveComponent({ data }: Props) {
  "use memo";
  // O compilador otimiza este componente
  return <Chart data={data} />;
}

Verificando a saída do compilador:

# Veja o que o compilador transforma
npx react-compiler-healthcheck
 
# Ou inspecione a saída compilada
npx babel --plugins babel-plugin-react-compiler src/Component.tsx

Notas do TypeScript

O compilador funciona com TypeScript imediatamente. Nenhuma configuração de tipo adicional é necessária.
As anotações de tipo são preservadas - o compilador apenas transforma o comportamento em tempo de execução.
Componentes genéricos são suportados. O compilador os trata da mesma forma que componentes não genéricos.
A diretiva "use no memo" é uma string literal e não precisa de uma declaração de tipo.

Armadilhas

Estado mutável externo quebra as suposições do compilador - O compilador assume renderização pura. Se um componente lê de uma variável global mutável ou de um ref durante a renderização, o compilador pode armazenar em cache um resultado obsoleto. Correção: Use useSyncExternalStore para stores externos ou adicione a diretiva "use no memo".
Efeitos colaterais durante a renderização - Código que registra, muta objetos externos ou dispara requisições de rede durante a renderização será cacheado pelo compilador, o que significa que os efeitos colaterais podem não ser executados a cada renderização como esperado. Correção: Mova os efeitos colaterais para useEffect ou manipuladores de eventos.
Computações não idempotentes - Se o cálculo de um valor depende de Date.now(), Math.random() ou outras fontes não determinísticas, o compilador pode armazenar em cache um resultado obsoleto. Correção: Mova valores não determinísticos para estado ou efeitos.
Componentes de classe não são otimizados - O compilador funciona apenas com componentes de função e hooks. Componentes de classe são passados sem alterações. Correção: Migre componentes de classe para componentes de função.
Memoização manual ainda é necessária em casos raros - O compilador pode não otimizar limites entre componentes em todos os casos, especialmente com componentes de ordem superior ou render props. Correção: Perfis após habilitar o compilador. Adicione memo manual apenas onde o profiling mostrar que o compilador perdeu uma otimização.
Mantenha a memoização manual existente durante a migração - Remover useMemo/useCallback antes de habilitar o compilador deixa seu aplicativo não otimizado. Correção: Habilite o compilador primeiro, verifique se o desempenho é mantido e, em seguida, remova a memoização manual.

Alternativas

Abordagem	Compromisso
`useMemo` manual + `useCallback` + `memo`	Controle total; verboso; arrays de dependência propensos a erros
React Compiler	Zero boilerplate; requer React 19+; experimental
Colocação de estado	Evita a necessidade de memoização; pode precisar de reestruturação
Seletores Zustand	Assinaturas granulares; adiciona dependência externa
Million.js	Compilador alternativo para otimização de DOM virtual; terceirizado
Sinais (Preact, Solid)	Modelo reativo evita o problema de re-renderização; framework diferente

FAQs

O que é o React Compiler e como ele difere da memoização manual?

O React Compiler é um plugin Babel que analisa o código do componente em tempo de build e insere automaticamente a memoização (equivalente a useMemo, useCallback e memo). Diferente da memoização manual, você não escreve arrays de dependência -- o compilador rastreia as dependências estaticamente.

Como habilitar o React Compiler em um projeto Next.js?

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

Instale também o plugin Babel: npm install -D babel-plugin-react-compiler.

Você pode optar por um componente específico fora da otimização do compilador?

Sim. Adicione a diretiva "use no memo" no topo do corpo do componente:

function DebugPanel({ data }: { data: unknown }) {
  "use no memo";
  console.log("Renderizado em", Date.now());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Quais são as Regras do React que o compilador assume que você segue?

Renderização pura: sem efeitos colaterais durante a renderização
Nenhuma mutação de props ou estado durante a renderização
Ordem estável de chamadas de hook (sem hooks dentro de condições ou loops)
Saída de renderização idempotente para as mesmas entradas

Violar essas regras pode produzir resultados cacheados incorretos.

Armadilha: O que acontece se um componente ler de uma variável global mutável durante a renderização?

O compilador pode armazenar em cache um resultado obsoleto porque assume renderização pura. Se um componente lê de window.someGlobal ou de um ref mutável durante a renderização, o resultado em cache não refletirá as atualizações desse global.

Correção: Use useSyncExternalStore para stores externos ou adicione "use no memo".

Armadilha: Por que efeitos colaterais durante a renderização podem parar de disparar após habilitar o compilador?

O compilador armazena em cache a saída do componente. Se efeitos colaterais (logs, requisições de rede, mutações) são executados durante a renderização, eles podem ser ignorados quando o resultado em cache é reutilizado.

Correção: Mova os efeitos colaterais para useEffect ou manipuladores de eventos.

O compilador funciona com componentes de classe?

Não. O compilador otimiza apenas componentes de função e hooks. Componentes de classe são passados sem alterações. Migre componentes de classe para componentes de função para se beneficiar.

Você deve remover `useMemo` e `useCallback` existentes antes de habilitar o compilador?

Não. Habilite o compilador primeiro, verifique se o desempenho é mantido e, em seguida, remova a memoização manual. Remover hooks antes de habilitar o compilador deixa seu aplicativo não otimizado durante o intervalo.

O React Compiler requer alguma configuração especial do TypeScript?

Não. O compilador funciona com TypeScript imediatamente. As anotações de tipo são preservadas -- o compilador apenas transforma o comportamento em tempo de execução. Componentes genéricos são suportados sem alterações.

Como você pode verificar o que o compilador transforma em seu código?

npx react-compiler-healthcheck
# Ou inspecione a saída compilada diretamente:
npx babel --plugins babel-plugin-react-compiler src/Component.tsx

O que faz "use memo" no modo de compilação por anotação?

No modo compilationMode: "annotation", apenas os componentes com a diretiva "use memo" são otimizados pelo compilador. Isso permite a migração gradual optando por componente.

Como o cache granular do compilador difere do `useMemo` manual?

O useMemo manual armazena em cache na granularidade que você especifica (um valor por chamada de hook). O compilador pode armazenar em cache elementos JSX individuais dentro de um componente, potencialmente alcançando uma granularidade melhor do que a otimização escrita manualmente.

Relacionado

Memoização - Padrões manuais de useMemo, useCallback e React.memo
Prevenindo Re-renderizações - Padrões estruturais que reduzem re-renderizações sem memoização
Profiling - Verificando se o compilador está otimizando efetivamente seus componentes
Otimização de Bundle - O compilador adiciona sobrecarga mínima ao bundle

Receita

// Passo 1: Instale o compilador
// npm install -D babel-plugin-react-compiler
 
// Passo 2: Adicione à sua configuração do Next.js (next.config.ts)
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
export default nextConfig;
 
// Passo 3: Remova a memoização manual - o compilador cuida disso
// ANTES: Memoização manual
function ProductList({ products, category }: Props) {
  const filtered = useMemo(
    () => products.filter((p) => p.category === category),
    [products, category]
  );
  const handleClick = useCallback((id: string) => {
    selectProduct(id);
  }, [selectProduct]);
 
  return <MemoizedGrid items={filtered} onClick={handleClick} />;
}
const MemoizedGrid = memo(Grid);
 
// DEPOIS: O compilador auto-memoiza - código mais limpo, mesmo desempenho
function ProductList({ products, category }: Props) {
  const filtered = products.filter((p) => p.category === category);
  const handleClick = (id: string) => selectProduct(id);
 
  return <Grid items={filtered} onClick={handleClick} />;
}

Exemplo de Trabalho

// ---- ANTES: Memoização manual com 15 linhas de boilerplate ----
 
import { memo, useMemo, useCallback, useState } from "react";
 
interface User {
  id: string;
  name: string;
  role: "admin" | "user";
  lastActive: Date;
}
 
function UserDashboard({ users }: { users: User[] }) {
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<"all" | "admin" | "user">("all");
  const [selectedId, setSelectedId] = useState<string | null>(null);
 
  const filteredUsers = useMemo(
    () =>
      users
        .filter((u) => roleFilter === "all" || u.role === roleFilter)
        .filter((u) => u.name.toLowerCase().includes(search.toLowerCase()))
        .sort((a, b) => b.lastActive.getTime() - a.lastActive.getTime()),
    [users, roleFilter, search]
  );
 
  const handleSelect = useCallback((id: string) => {
    setSelectedId(id);
  }, []);
 
  const stats = useMemo(
    () => ({
      total: users.length,
      admins: users.filter((u) => u.role === "admin").length,
      active: users.filter((u) => {
        const hourAgo = Date.now() - 3600_000;
        return u.lastActive.getTime() > hourAgo;
      }).length,
    }),
    [users]
  );
 
  return (
    <div>
      <MemoizedStatsBar stats={stats} />
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <select
        value={roleFilter}
        onChange={(e) => setRoleFilter(e.target.value as "all" | "admin" | "user")}
      >
        <option value="all">All</option>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </select>
      <MemoizedUserList
        users={filteredUsers}
        selectedId={selectedId}
        onSelect={handleSelect}
      />
    </div>
  );
}
 
const MemoizedStatsBar = memo(function StatsBar({
  stats,
}: {
  stats: { total: number; admins: number; active: number };
}) {
  return (
    <div className="flex gap-4">
      <span>Total: {stats.total}</span>
      <span>Admins: {stats.admins}</span>
      <span>Active: {stats.active}</span>
    </div>
  );
});
 
const MemoizedUserList = memo(function UserList({
  users,
  selectedId,
  onSelect,
}: {
  users: User[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <ul>
      {users.map((user) => (
        <li
          key={user.id}
          onClick={() => onSelect(user.id)}
          className={user.id === selectedId ? "bg-blue-100" : ""}
        >
          {user.name} ({user.role})
        </li>
      ))}
    </ul>
  );
});
 
// ---- DEPOIS: React Compiler - mesmo desempenho, zero boilerplate ----
 
function UserDashboard({ users }: { users: User[] }) {
  const [search, setSearch] = useState("");
  const [roleFilter, setRoleFilter] = useState<"all" | "admin" | "user">("all");
  const [selectedId, setSelectedId] = useState<string | null>(null);
 
  const filteredUsers = users
    .filter((u) => roleFilter === "all" || u.role === roleFilter)
    .filter((u) => u.name.toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => b.lastActive.getTime() - a.lastActive.getTime());
 
  const stats = {
    total: users.length,
    admins: users.filter((u) => u.role === "admin").length,
    active: users.filter((u) => {
      const hourAgo = Date.now() - 3600_000;
      return u.lastActive.getTime() > hourAgo;
    }).length,
  };
 
  return (
    <div>
      <StatsBar stats={stats} />
      <input value={search} onChange={(e) => setSearch(e.target.value)} />
      <select
        value={roleFilter}
        onChange={(e) => setRoleFilter(e.target.value as "all" | "admin" | "user")}
      >
        <option value="all">All</option>
        <option value="admin">Admin</option>
        <option value="user">User</option>
      </select>
      <UserList
        users={filteredUsers}
        selectedId={selectedId}
        onSelect={(id: string) => setSelectedId(id)}
      />
    </div>
  );
}
 
function StatsBar({ stats }: { stats: { total: number; admins: number; active: number } }) {
  return (
    <div className="flex gap-4">
      <span>Total: {stats.total}</span>
      <span>Admins: {stats.admins}</span>
      <span>Active: {stats.active}</span>
    </div>
  );
}
 
function UserList({
  users,
  selectedId,
  onSelect,
}: {
  users: User[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <ul>
      {users.map((user) => (
        <li
          key={user.id}
          onClick={() => onSelect(user.id)}
          className={user.id === selectedId ? "bg-blue-100" : ""}
        >
          {user.name} ({user.role})
        </li>
      ))}
    </ul>
  );
}

O que isso demonstra:

A versão otimizada pelo compilador remove 6 chamadas de hook (useMemo x2, useCallback x1, wrappers memo x2) e 15 linhas de código boilerplate.
O desempenho é equivalente porque o compilador insere a memoização no nível da AST durante o build.
O código é mais legível e fácil de manter sem arrays de dependência manuais.
Nenhuma mudança de comportamento - o compilador apenas adiciona otimizações, nunca altera a semântica.

Mergulho Profundo

Como Funciona

Transformação em tempo de build - O React Compiler é um plugin Babel que analisa o código do seu componente em tempo de build. Ele identifica valores, funções e elementos JSX que podem ser armazenados em cache com segurança entre as renderizações.
Rastreamento automático de dependências - O compilador analisa estaticamente em quais variáveis cada expressão depende e, em seguida, envolve essas expressões em memoização com os arrays de dependência corretos. Isso é mais confiável do que escrever arrays de dependência manualmente.
Memoização em nível de componente - O compilador envolve os valores de retorno dos componentes para que, se as props e o estado não tiverem mudado, o componente pule a renderização completamente. Isso substitui React.memo.
Cache granular - Ao contrário do useMemo manual, que armazena em cache na granularidade que você especifica, o compilador pode armazenar em cache elementos JSX individuais dentro de um componente, potencialmente alcançando uma granularidade melhor do que a otimização escrita manualmente.
Aplicação das Regras do React - O compilador assume que seu código segue as Regras do React (renderização pura, sem mutação durante a renderização, ordem estável de chamadas de hook). Código que viola essas regras pode produzir resultados incorretos quando compilado.

Variações

Optando por sair com a diretiva "use no memo":

// Opta um componente específico fora da otimização do compilador
function DebugPanel({ data }: { data: unknown }) {
  "use no memo";
  // Este componente sempre re-renderiza - útil para depuração
  console.log("DebugPanel renderizado em", Date.now());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Opt-in por arquivo (migração gradual):

// next.config.ts - compila apenas diretórios específicos
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: "annotation",
      // Ou direcione caminhos específicos:
      // include: ["src/components/**"],
    },
  },
};

// Opta pelo nível do componente com "use memo"
function ExpensiveComponent({ data }: Props) {
  "use memo";
  // O compilador otimiza este componente
  return <Chart data={data} />;
}

Verificando a saída do compilador:

# Veja o que o compilador transforma
npx react-compiler-healthcheck
 
# Ou inspecione a saída compilada
npx babel --plugins babel-plugin-react-compiler src/Component.tsx

Notas do TypeScript

O compilador funciona com TypeScript imediatamente. Nenhuma configuração de tipo adicional é necessária.
As anotações de tipo são preservadas - o compilador apenas transforma o comportamento em tempo de execução.
Componentes genéricos são suportados. O compilador os trata da mesma forma que componentes não genéricos.
A diretiva "use no memo" é uma string literal e não precisa de uma declaração de tipo.

Armadilhas

Estado mutável externo quebra as suposições do compilador - O compilador assume renderização pura. Se um componente lê de uma variável global mutável ou de um ref durante a renderização, o compilador pode armazenar em cache um resultado obsoleto. Correção: Use useSyncExternalStore para stores externos ou adicione a diretiva "use no memo".
Efeitos colaterais durante a renderização - Código que registra, muta objetos externos ou dispara requisições de rede durante a renderização será cacheado pelo compilador, o que significa que os efeitos colaterais podem não ser executados a cada renderização como esperado. Correção: Mova os efeitos colaterais para useEffect ou manipuladores de eventos.
Computações não idempotentes - Se o cálculo de um valor depende de Date.now(), Math.random() ou outras fontes não determinísticas, o compilador pode armazenar em cache um resultado obsoleto. Correção: Mova valores não determinísticos para estado ou efeitos.
Componentes de classe não são otimizados - O compilador funciona apenas com componentes de função e hooks. Componentes de classe são passados sem alterações. Correção: Migre componentes de classe para componentes de função.
Memoização manual ainda é necessária em casos raros - O compilador pode não otimizar limites entre componentes em todos os casos, especialmente com componentes de ordem superior ou render props. Correção: Perfis após habilitar o compilador. Adicione memo manual apenas onde o profiling mostrar que o compilador perdeu uma otimização.
Mantenha a memoização manual existente durante a migração - Remover useMemo/useCallback antes de habilitar o compilador deixa seu aplicativo não otimizado. Correção: Habilite o compilador primeiro, verifique se o desempenho é mantido e, em seguida, remova a memoização manual.

Alternativas

Abordagem	Compromisso
`useMemo` manual + `useCallback` + `memo`	Controle total; verboso; arrays de dependência propensos a erros
React Compiler	Zero boilerplate; requer React 19+; experimental
Colocação de estado	Evita a necessidade de memoização; pode precisar de reestruturação
Seletores Zustand	Assinaturas granulares; adiciona dependência externa
Million.js	Compilador alternativo para otimização de DOM virtual; terceirizado
Sinais (Preact, Solid)	Modelo reativo evita o problema de re-renderização; framework diferente

FAQs

O que é o React Compiler e como ele difere da memoização manual?

Como habilitar o React Compiler em um projeto Next.js?

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

Instale também o plugin Babel: npm install -D babel-plugin-react-compiler.

Você pode optar por um componente específico fora da otimização do compilador?

Sim. Adicione a diretiva "use no memo" no topo do corpo do componente:

function DebugPanel({ data }: { data: unknown }) {
  "use no memo";
  console.log("Renderizado em", Date.now());
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Quais são as Regras do React que o compilador assume que você segue?

Renderização pura: sem efeitos colaterais durante a renderização
Nenhuma mutação de props ou estado durante a renderização
Ordem estável de chamadas de hook (sem hooks dentro de condições ou loops)
Saída de renderização idempotente para as mesmas entradas

Violar essas regras pode produzir resultados cacheados incorretos.

Armadilha: O que acontece se um componente ler de uma variável global mutável durante a renderização?

Correção: Use useSyncExternalStore para stores externos ou adicione "use no memo".

Armadilha: Por que efeitos colaterais durante a renderização podem parar de disparar após habilitar o compilador?

Correção: Mova os efeitos colaterais para useEffect ou manipuladores de eventos.

O compilador funciona com componentes de classe?

Não. O compilador otimiza apenas componentes de função e hooks. Componentes de classe são passados sem alterações. Migre componentes de classe para componentes de função para se beneficiar.

Você deve remover `useMemo` e `useCallback` existentes antes de habilitar o compilador?

O React Compiler requer alguma configuração especial do TypeScript?

Como você pode verificar o que o compilador transforma em seu código?

npx react-compiler-healthcheck
# Ou inspecione a saída compilada diretamente:
npx babel --plugins babel-plugin-react-compiler src/Component.tsx

O que faz "use memo" no modo de compilação por anotação?

No modo compilationMode: "annotation", apenas os componentes com a diretiva "use memo" são otimizados pelo compilador. Isso permite a migração gradual optando por componente.

Como o cache granular do compilador difere do `useMemo` manual?

Relacionado

Memoização - Padrões manuais de useMemo, useCallback e React.memo
Prevenindo Re-renderizações - Padrões estruturais que reduzem re-renderizações sem memoização
Profiling - Verificando se o compilador está otimizando efetivamente seus componentes
Otimização de Bundle - O compilador adiciona sobrecarga mínima ao bundle

React Compiler (React Forget) - Memoização automática em tempo de build

Buscar na documentação

React Compiler (React Forget) - Memoização automática em tempo de build