Introdução
O React Compiler é uma nova ferramenta de build que otimiza automaticamente seu aplicativo React. Ele funciona com JavaScript puro e compreende asRegras do React, então você não precisa reescrever nenhum código para usá-lo.
Você aprenderá
- O que o React Compiler faz
- Como começar com o compilador
- Estratégias de adoção incremental
- Depuração e solução de problemas quando algo der errado
- Usando o compilador na sua biblioteca React
O que o React Compiler faz?
O React Compiler otimiza automaticamente seu aplicativo React no momento da build. O React geralmente é rápido o suficiente sem otimização, mas às vezes você precisa memorizar manualmente componentes e valores para manter seu aplicativo responsivo. Essa memorização manual é tediosa, fácil de errar e adiciona código extra para manter. O React Compiler faz essa otimização automaticamente para você, libertando você desse fardo mental para que você possa se concentrar na criação de funcionalidades.
Antes do React Compiler
Sem o compilador, você precisa memorizar manualmente componentes e valores para otimizar re-renderizações:
Observação
Esta memorização manual tem um bug sutil que quebra a memorização:
Mesmo quehandleClickesteja envolvido emuseCallback, a função de seta() => handleClick(item)cria uma nova função toda vez que o componente renderiza. Isso significa queItemsempre receberá uma nova proponClick, quebrando a memorização.
O React Compiler é capaz de otimizar isso corretamente com ou sem a função de seta, garantindo queItemsó re-renderize quandoprops.onClickmudar.
Depois do React Compiler
Com o React Compiler, você escreve o mesmo código sem memorização manual:
Veja este exemplo no React Compiler Playground
O React Compiler aplica automaticamente a memorização ideal, garantindo que seu aplicativo só re-renderize quando necessário.
Devo experimentar o compilador?
Incentivamos todos a começar a usar o React Compiler. Embora o compilador ainda seja uma adição opcional ao React hoje, no futuro alguns recursos podem exigir o compilador para funcionar completamente.
É seguro usar?
O React Compiler agora está estável e foi testado extensivamente em produção. Embora tenha sido usado em produção em empresas como a Meta, a implantação do compilador em produção para seu aplicativo dependerá da saúde da sua base de código e de quão bem você seguiu asRegras do React.
Quais ferramentas de build são suportadas?
O React Compiler pode ser instalado emvárias ferramentas de buildcomo Babel, Vite, Metro e Rsbuild.
O React Compiler é principalmente um wrapper leve de plugin Babel em torno do compilador principal, que foi projetado para ser desacoplado do próprio Babel. Embora a versão estável inicial do compilador permaneça principalmente um plugin Babel, estamos trabalhando com as equipes do swc eoxcpara construir suporte de primeira classe para o React Compiler, para que você não precise adicionar o Babel de volta aos seus pipelines de build no futuro.
Os usuários do Next.js podem habilitar o React Compiler invocado pelo swc usandov15.3.1ou superior.
O que devo fazer sobre useMemo, useCallback e React.memo?
Por padrão, o React Compiler memoizará 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.
No entanto, em alguns casos, os desenvolvedores podem precisar de mais controle sobre a memoização. Os hooksuseMemo e useCallbackpodem continuar a ser usados com o React Compiler como uma escapatória para fornecer controle sobre quais valores são memoizados. Um caso de uso comum para isso é se um valor memoizado é usado como uma dependência de efeito, para 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 usaruseMemo/useCallbackonde 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.
Experimente o React Compiler
Esta seção ajudará você a começar com o React Compiler e entender como usá-lo efetivamente em seus projetos.
- Instalação- Instale o React Compiler e configure-o para suas ferramentas de build
- Compatibilidade de Versão do React- Suporte para React 17, 18 e 19
- Configuração- Personalize o compilador para suas necessidades específicas
- Adoção Incremental- Estratégias para implementar gradualmente o compilador em bases de código existentes
- Depuração e Solução de Problemas- Identifique e corrija problemas ao usar o compilador
- Compilando Bibliotecas- Melhores práticas para distribuir código compilado
- Referência da API- Documentação detalhada de todas as opções de configuração
Recursos adicionais
Além desta documentação, recomendamos consultar oGrupo de Trabalho do React Compilerpara obter informações adicionais e discussões sobre o compilador.