Instalação
Este guia irá ajudá-lo a instalar e configurar o React Compiler em sua aplicação React.
Você aprenderá
- Como instalar o React Compiler
- Configuração básica para diferentes ferramentas de build
- Como verificar se sua configuração está funcionando
Pré-requisitos
O React Compiler foi projetado para funcionar melhor com React 19, mas também suporta React 17 e 18. Saiba mais sobre compatibilidade de versão React.
Instalação
Instale o React Compiler como uma devDependency
:
Ou com Yarn:
Ou com pnpm:
Configuração Básica
O React Compiler foi projetado para funcionar por padrão sem nenhuma configuração. No entanto, se você precisar configurá-lo em circunstâncias especiais (por exemplo, para atingir versões React abaixo de 19), consulte a referência de opções do compilador.
O processo de configuração depende da sua ferramenta de build. O React Compiler inclui um plugin Babel que se integra ao seu pipeline de build.
Babel
Crie ou atualize seu babel.config.js
:
module.exports = {
plugins: [
'babel-plugin-react-compiler', // deve executar primeiro!
// ... outros plugins
],
// ... outras configurações
};
Vite
Se você usa Vite, pode adicionar o plugin ao vite-plugin-react:
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
babel: {
plugins: ['babel-plugin-react-compiler'],
},
}),
],
});
Alternativamente, se você preferir um plugin Babel separado para Vite:
// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react(),
babel({
babelConfig: {
plugins: ['babel-plugin-react-compiler'],
},
}),
],
});
Next.js
Por favor, consulte a documentação do Next.js para mais informações.
React Router
Instale vite-plugin-babel
e adicione o plugin Babel do compilador:
// vite.config.js
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import { reactRouter } from "@react-router/dev/vite";
const ReactCompilerConfig = { /* ... */ };
export default defineConfig({
plugins: [
reactRouter(),
babel({
filter: /\.[jt]sx?$/,
babelConfig: {
presets: ["@babel/preset-typescript"], // se você usa TypeScript
plugins: [
["babel-plugin-react-compiler", ReactCompilerConfig],
],
},
}),
],
});
Webpack
Um loader webpack da comunidade está disponível aqui.
Expo
Por favor, consulte a documentação do Expo para habilitar e usar o React Compiler em aplicações Expo.
Metro (React Native)
React Native usa Babel via Metro, então consulte a seção Uso com Babel para instruções de instalação.
Rspack
Por favor, consulte a documentação do Rspack para habilitar e usar o React Compiler em aplicações Rspack.
Rsbuild
Por favor, consulte a documentação do Rsbuild para habilitar e usar o React Compiler em aplicações Rsbuild.
Integração com ESLint
O React Compiler inclui uma regra ESLint que ajuda a identificar código que não pode ser otimizado. Quando a regra ESLint reporta um erro, significa que o compilador pulará a otimização daquele componente ou hook específico. Isso é seguro: o compilador continuará otimizando outras partes da sua base de código. Você não precisa corrigir todas as violações imediatamente. Resolva-as no seu próprio ritmo para aumentar gradualmente o número de componentes otimizados.
Instale o plugin ESLint:
Em seguida, habilite a regra do compilador na sua configuração ESLint:
// .eslintrc.js
module.exports = {
rules: {
'react-hooks/react-compiler': 'error',
},
};
A regra ESLint irá:
- Identificar violações das Regras do React
- Mostrar quais componentes não podem ser otimizados
- Fornecer mensagens de erro úteis para corrigir problemas
Verificar Sua Configuração
Após a instalação, verifique se o React Compiler está funcionando corretamente.
Verificar React DevTools
Componentes otimizados pelo React Compiler mostrarão um badge “Memo ✨” no React DevTools:
- Instale a extensão do navegador React Developer Tools
- Abra sua aplicação em modo de desenvolvimento
- Abra o React DevTools
- Procure pelo emoji ✨ ao lado dos nomes dos componentes
Se o compilador estiver funcionando:
- Componentes mostrarão um badge “Memo ✨” no React DevTools
- Cálculos caros serão automaticamente memoizados
- Nenhum
useMemo
manual é necessário
Verificar Saída do Build
Você também pode verificar se o compilador está executando verificando a saída do seu build. O código compilado incluirá lógica de memoização automática que o compilador adiciona automaticamente.
import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = <div>Hello World</div>;
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
}
Solução de Problemas
Excluindo componentes específicos
Se um componente está causando problemas após a compilação, você pode temporariamente excluí-lo usando a diretiva "use no memo"
:
function ProblematicComponent() {
"use no memo";
// Código do componente aqui
}
Isso diz ao compilador para pular a otimização para este componente específico. Você deve corrigir o problema subjacente e remover a diretiva uma vez resolvido.
Para mais ajuda na solução de problemas, veja o guia de depuração.
Próximos Passos
Agora que você tem o React Compiler instalado, saiba mais sobre:
- Compatibilidade de versão React para React 17 e 18
- Opções de configuração para personalizar o compilador
- Estratégias de adoção incremental para bases de código existentes
- Técnicas de depuração para solução de problemas
- Guia de compilação de bibliotecas para compilar sua biblioteca React