React Compiler v1.0

7 de outubro de 2025 por Lauren Tan, Joe Savona e Mofei Zhang.

1. O React Compiler 1.0 está disponível hoje.
2. Regras de linting com o compilador serão incluídas nos presets recommended e recommended-latest do eslint-plugin-react-hooks.
3. Publicamos um guia de adoção incremental e fizemos parceria com Expo, Vite e Next.js para que novos aplicativos possam começar com o compilador ativado.

Estamos lançando a primeira versão estável do compilador hoje. O React Compiler funciona tanto no React quanto no React Native, e otimiza automaticamente componentes e hooks sem exigir reescritas. O compilador foi testado em batalha em aplicativos importantes na Meta e está totalmente pronto para produção.

O React Compiler é uma ferramenta de tempo de compilação que otimiza seu aplicativo React por meio de memoização automática. No ano passado, publicamos o primeiro beta do React Compiler e recebemos muitos feedbacks e contribuições excelentes. Estamos animados com os ganhos que vimos de pessoas adotando o compilador (veja estudos de caso do Sanity Studio e Wakelet) e estamos ansiosos para levar o compilador a mais usuários na comunidade React.

Este lançamento é o culminar de um esforço de engenharia enorme e complexo que abrange quase uma década. A primeira exploração da equipe React em compiladores começou com o Prepack em 2017. Embora este projeto tenha sido eventualmente descontinuado, houve muitos aprendizados que informaram a equipe sobre o design dos Hooks, que foram projetados com um futuro compilador em mente. Em 2021, Xuan Huang demonstrou a primeira iteração de uma nova abordagem para o React Compiler.

Embora esta primeira versão do novo React Compiler tenha sido eventualmente reescrita, o primeiro protótipo nos deu maior confiança de que este era um problema tratável, e os aprendizados de que uma arquitetura de compilador alternativa poderia nos dar precisamente as características de memoização que queríamos. Joe Savona, Sathya Gunasekaran, Mofei Zhang e Lauren Tan trabalharam em nossa primeira reescrita, movendo a arquitetura do compilador para uma Representação Intermediária de Alto Nível (HIR) baseada em Grafo de Fluxo de Controle (CFG). Isso abriu caminho para análises muito mais precisas e até mesmo inferência de tipos dentro do React Compiler. Desde então, muitas partes significativas do compilador foram reescritas, com cada reescrita informada por nossos aprendizados da tentativa anterior. E recebemos ajuda e contribuições significativas de muitos membros da equipe React ao longo do caminho.

Este lançamento estável é o primeiro de muitos. O compilador continuará a evoluir e melhorar, e esperamos que ele se torne uma nova base e era para a próxima década e mais do React.

Você pode ir direto para o guia de início rápido, ou continuar lendo para os destaques do React Conf 2025.

import { use } from 'react';

export default function ThemeProvider(props) {
  if (!props.children) {
    return null;
  }
  // O compilador ainda pode memorizar código após um retorno condicional
  const theme = mergeTheme(props.theme, use(ThemeContext));
  return (
    <ThemeContext value={theme}>
      {props.children}
    </ThemeContext>
  );
}

Use o React Compiler hoje

Para instalar o compilador:

npm

npm install --save-dev --save-exact babel-plugin-react-compiler@latest

pnpm

pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest

yarn

yarn add --dev --exact babel-plugin-react-compiler@latest

Como parte do lançamento estável, tornamos o React Compiler mais fácil de adicionar aos seus projetos e adicionamos otimizações em como o compilador gera a memoização. O React Compiler agora suporta cadeias opcionais e índices de array como dependências. Essas melhorias resultam em menos re-renderizações e UIs mais responsivas, enquanto permitem que você continue escrevendo código declarativo idiomático.

Você pode encontrar mais detalhes sobre o uso do Compilador em nossa documentação.

O que estamos vendo em produção

O compilador já foi lançado em aplicativos como a Meta Quest Store. Vimos melhorias de até 12% nas cargas iniciais e navegações entre páginas, enquanto certas interações são mais de 2,5 vezes mais rápidas. O uso de memória permanece neutro mesmo com esses ganhos. Embora seus resultados possam variar, recomendamos experimentar o compilador em seu aplicativo para ver ganhos de desempenho semelhantes.

Compatibilidade com versões anteriores

Conforme observado no anúncio do Beta, o React Compiler é compatível com React 17 e superior. Se você ainda não está no React 19, pode usar o React Compiler especificando um alvo mínimo em sua configuração do compilador e adicionando react-compiler-runtime como uma dependência. Você pode encontrar a documentação sobre isso aqui.

Aplique as regras do React com linting powered by compiler

O React Compiler inclui uma regra ESLint que ajuda a identificar código que quebra as Regras do React. O linter não requer que o compilador seja instalado, portanto, não há risco em atualizar o eslint-plugin-react-hooks. Recomendamos que todos atualizem hoje.

Se você já instalou o eslint-plugin-react-compiler, agora pode removê-lo e usar eslint-plugin-react-hooks@latest. Muitos agradecimentos a @michaelfaith por contribuir para esta melhoria!

Para instalar:

npm

npm install --save-dev eslint-plugin-react-hooks@latest

pnpm

pnpm add --save-dev eslint-plugin-react-hooks@latest

yarn

yarn add --dev eslint-plugin-react-hooks@latest

// eslint.config.js (Flat Config)
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

// eslintrc.json (Legacy Config)
{
  "extends": ["plugin:react-hooks/recommended"],
  // ...
}

Para habilitar as regras do React Compiler, recomendamos usar o preset recommended. Você também pode conferir o README para mais instruções. Aqui estão alguns exemplos que apresentamos no React Conf:

• Capturando padrões de setState que causam loops de renderização com set-state-in-render.
• Sinalizando trabalho caro dentro de efeitos via set-state-in-effect.
• Prevenindo acesso inseguro a refs durante a renderização com refs.

O que devo fazer sobre useMemo, useCallback e React.memo?

Por padrão, o React Compiler memorizará seu código com base em sua análise e heurísticas. Na maioria dos casos, essa memoização será tão precisa, ou mais, do que o que você pode ter escrito — e como observado acima, o compilador pode memorizar mesmo em casos onde useMemo/useCallback não podem ser usados, como após um retorno antecipado.

No entanto, em alguns casos, os desenvolvedores podem precisar de mais controle sobre a memoização. Os hooks useMemo e useCallback podem continuar a ser usados com o React Compiler como uma saída de emergência para fornecer controle sobre quais valores são memorizados. Um caso de uso comum para isso é se um valor memorizado for usado como dependência de um efeito, a fim de garantir que um efeito não seja disparado repetidamente, mesmo quando suas dependências não mudam significativamente.

Para código novo, recomendamos confiar no compilador para memoização e usar useMemo/useCallback quando necessário para obter controle preciso.

Para código existente, recomendamos deixar a memoização existente no lugar (removê-la pode alterar a saída da compilação) ou testar cuidadosamente antes de remover a memoização.

Novos aplicativos devem usar o React Compiler

Fizemos parceria com as equipes Expo, Vite e Next.js para adicionar o compilador à experiência de novos aplicativos.

O Expo SDK 54 e superior tem o compilador ativado por padrão, então novos aplicativos poderão aproveitar o compilador automaticamente desde o início.

npx create-expo-app@latest

Usuários de Vite e Next.js podem escolher os templates com o compilador ativado em create-vite e create-next-app.

npm create vite@latest

npx create-next-app@latest

Adote o React Compiler incrementalmente

Se você está mantendo um aplicativo existente, pode implementar o compilador no seu próprio ritmo. Publicamos um guia de adoção incremental passo a passo que cobre estratégias de controle, verificações de compatibilidade e ferramentas de implantação para que você possa habilitar o compilador com confiança.

Suporte swc (experimental)

O React Compiler pode ser instalado em várias ferramentas de compilação, como Babel, Vite e Rsbuild.

Além dessas ferramentas, colaboramos com Kang Dongyoon (@kdy1dev) da equipe swc para adicionar suporte adicional para o React Compiler como um plugin swc. Embora este trabalho não esteja concluído, o desempenho de compilação do Next.js deve ser consideravelmente mais rápido agora quando o React Compiler estiver ativado em seu aplicativo Next.js.

Recomendamos o uso do Next.js 15.3.1 ou superior para obter o melhor desempenho de compilação.

Usuários de Vite podem continuar usando vite-plugin-react para habilitar o compilador, adicionando-o como um plugin Babel. Também estamos trabalhando com a equipe oxc para adicionar suporte para o compilador. Assim que o rolldown for oficialmente lançado e suportado no Vite e o suporte oxc for adicionado para o React Compiler, atualizaremos a documentação com informações sobre como migrar.

Atualizando o React Compiler

O React Compiler funciona melhor quando a auto-memoização aplicada é estritamente para desempenho. Versões futuras do compilador podem alterar como a memoização é aplicada, por exemplo, ela pode se tornar mais granular e precisa.

No entanto, como o código do produto às vezes pode quebrar as regras do React de maneiras que nem sempre são detectáveis estaticamente em JavaScript, a alteração da memoização pode ocasionalmente ter resultados inesperados. Por exemplo, um valor previamente memorizado pode ser usado como dependência para um useEffect em algum lugar na árvore de componentes. Alterar como ou se esse valor é memorizado pode causar disparos excessivos ou insuficientes desse useEffect. Embora incentivemos o useEffect apenas para sincronização, sua base de código pode ter useEffects que cobrem outros casos de uso, como efeitos que precisam ser executados apenas em resposta a valores específicos que mudam.

Em outras palavras, a alteração da memoização pode, em raras circunstâncias, causar comportamento inesperado. Por esse motivo, recomendamos seguir as Regras do React e empregar testes contínuos de ponta a ponta de seu aplicativo para que você possa atualizar o compilador com confiança e identificar quaisquer violações das regras do React que possam causar problemas.

Se você não tiver uma boa cobertura de testes, recomendamos fixar o compilador em uma versão exata (por exemplo, 1.0.0) em vez de um intervalo SemVer (por exemplo, ^1.0.0). Você pode fazer isso passando as flags --save-exact (npm/pnpm) ou --exact (yarn) ao atualizar o compilador. Você deve então fazer quaisquer atualizações do compilador manualmente, tomando cuidado para verificar se seu aplicativo ainda funciona como esperado.

Agradecimentos a Jason Bonta, Jimmy Lai, Kang Dongyoon (@kdy1dev) e Dan Abramov por revisar e editar esta postagem.