diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index f5a870b22..57639f02a 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -1,126 +1,126 @@ --- -title: "React Compiler Beta Release" +title: "Lançamento Beta do React Compiler" author: Lauren Tan date: 2024/10/21 -description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler. +description: Na React Conf 2024, anunciamos o lançamento experimental do React Compiler, uma ferramenta de tempo de build que otimiza seu aplicativo React por meio de memoização automática. Neste post, queremos compartilhar o que vem a seguir para código aberto e nosso progresso no compilador. --- -October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). +21 de outubro de 2024 por [Lauren Tan](https://twitter.com/potetotes). --- -The React team is excited to share new updates: +A equipe do React está animada para compartilhar novidades: -1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback. -2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package. -3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler. +1. Estamos publicando o React Compiler Beta hoje, para que os primeiros usuários e mantenedores de bibliotecas possam testá-lo e fornecer feedback. +2. Estamos oficialmente suportando o React Compiler para aplicativos no React 17+, por meio de um pacote opcional `react-compiler-runtime`. +3. Estamos abrindo a associação pública do [React Compiler Working Group](https://github.com/reactwg/react-compiler) para preparar a comunidade para a adoção gradual do compilador. --- -At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler). +Na [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), anunciamos o lançamento experimental do React Compiler, uma ferramenta de tempo de build que otimiza seu aplicativo React por meio de memoização automática. [Você pode encontrar uma introdução ao React Compiler aqui](/learn/react-compiler). -Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. +Desde o primeiro lançamento, corrigimos diversos erros relatados pela comunidade React, recebemos diversas correções de erros e contribuições[^1] de alta qualidade para o compilador, tornamos o compilador mais resiliente à ampla diversidade de padrões JavaScript e continuamos a lançar o compilador de forma mais ampla na Meta. -In this post, we want to share what's next for React Compiler. +Neste post, queremos compartilhar o que vem a seguir para o React Compiler. -## Try React Compiler Beta today {/*try-react-compiler-beta-today*/} +## Experimente o React Compiler Beta hoje {/*try-react-compiler-beta-today*/} -At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag. +Na [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), compartilhamos uma atualização sobre o React Compiler. Hoje, estamos animados para anunciar um novo lançamento Beta do React Compiler e do plugin ESLint. Novos betas são publicados no npm usando a tag `@beta`. -To install React Compiler Beta: +Para instalar o React Compiler Beta: npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +Ou, se você estiver usando Yarn: yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here: +Você pode assistir a palestra de [Sathya Gunasekaran](https://twitter.com/_gsathya) na React India aqui: -## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} +## Recomendamos que todos usem o linter do React Compiler hoje {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} -React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. +O plugin ESLint do React Compiler ajuda os desenvolvedores a identificar e corrigir proativamente violações das [Regras do React](/reference/rules). **Recomendamos fortemente que todos usem o linter hoje**. O linter não requer que você tenha o compilador instalado, então você pode usá-lo independentemente, mesmo que não esteja pronto para experimentar o compilador. -To install the linter only: +Para instalar apenas o linter: npm install -D eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +Ou, se você estiver usando Yarn: yarn add -D eslint-plugin-react-compiler@beta -After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +Após a instalação, você pode habilitar o linter [adicionando-o à sua configuração do ESLint](/learn/react-compiler#installing-eslint-plugin-react-compiler). O uso do linter ajuda a identificar quebras das Regras do React, facilitando a adoção do compilador quando ele for totalmente lançado. -## Backwards Compatibility {/*backwards-compatibility*/} +## Compatibilidade com versões anteriores {/*backwards-compatibility*/} -React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18). +O React Compiler produz código que depende de APIs de tempo de execução adicionadas no React 19, mas, desde então, adicionamos suporte para o compilador também funcionar com React 17 e 18. Se você ainda não estiver no React 19, no lançamento Beta agora você pode testar o React Compiler especificando um `target` mínimo em sua configuração do compilador e adicionando `react-compiler-runtime` como uma dependência. [Você pode encontrar documentos sobre isso aqui](/learn/react-compiler#using-react-compiler-with-react-17-or-18). -## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} +## Usando o React Compiler em bibliotecas {/*using-react-compiler-in-libraries*/} -Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library. +Nosso lançamento inicial foi focado em identificar problemas importantes com o uso do compilador em aplicações. Recebemos ótimos feedbacks e melhoramos substancialmente o compilador desde então. Agora estamos prontos para receber feedback amplo da comunidade e para os autores de bibliotecas experimentarem o compilador para melhorar o desempenho e a experiência do desenvolvedor de manter sua biblioteca. -React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm. +O React Compiler também pode ser usado para compilar bibliotecas. Como o React Compiler precisa ser executado no código-fonte original antes de quaisquer transformações de código, não é possível que o pipeline de build de um aplicativo compile as bibliotecas que ele usa. Portanto, nossa recomendação é que os mantenedores da biblioteca compilem e testem suas bibliotecas de forma independente com o compilador e forneçam o código compilado para o npm. -Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. +Como seu código é pré-compilado, os usuários de sua biblioteca não precisarão ter o compilador habilitado para se beneficiarem da memoização automática aplicada à sua biblioteca. Se sua biblioteca tiver como alvo aplicativos ainda não no React 19, especifique um `target` mínimo e adicione `react-compiler-runtime` como uma dependência direta. O pacote de tempo de execução usará a implementação correta das APIs dependendo da versão do aplicativo e fará o polyfill das APIs ausentes, se necessário. -[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) +[Você pode encontrar mais documentos sobre isso aqui.](/learn/react-compiler#using-the-compiler-on-libraries) -## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} +## Abrindo o React Compiler Working Group para todos {/*opening-up-react-compiler-working-group-to-everyone*/} -We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. +Anunciamos anteriormente o [React Compiler Working Group](https://github.com/reactwg/react-compiler) somente por convite na React Conf para fornecer feedback, fazer perguntas e colaborar no lançamento experimental do compilador. -From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). +A partir de hoje, juntamente com o lançamento Beta do React Compiler, estamos abrindo a associação do Working Group para todos. O objetivo do React Compiler Working Group é preparar o ecossistema para uma adoção suave e gradual do React Compiler por aplicativos e bibliotecas existentes. Continue a arquivar relatórios de erros no [repositório React](https://github.com/facebook/react), mas deixe feedback, faça perguntas ou compartilhe ideias no [fórum de discussão do Working Group](https://github.com/reactwg/react-compiler/discussions). -The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. +A equipe principal também usará o repositório de discussões para compartilhar nossas descobertas de pesquisa. À medida que o Lançamento Estável se aproxima, qualquer informação importante também será publicada neste fórum. -## React Compiler at Meta {/*react-compiler-at-meta*/} +## React Compiler na Meta {/*react-compiler-at-meta*/} -At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components. +Na [React Conf](/blog/2024/05/22/react-conf-2024-recap), compartilhamos que nossa implantação do compilador na Quest Store e no Instagram foi bem-sucedida. Desde então, implantamos o React Compiler em vários aplicativos da web importantes na Meta, incluindo [Facebook](https://www.facebook.com) e [Threads](https://www.threads.net). Isso significa que, se você usou algum desses aplicativos recentemente, sua experiência pode ter sido alimentada pelo compilador. Conseguimos integrar esses aplicativos ao compilador com poucas alterações de código necessárias, em um monorepositório com mais de 100.000 componentes React. -We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us. +Vimos melhorias notáveis de desempenho em todos esses aplicativos. À medida que fazíamos a implantação, continuamos a ver resultados da ordem de [as vitórias que compartilhamos anteriormente na ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). Esses aplicativos já foram muito ajustados e otimizados por engenheiros da Meta e especialistas em React ao longo dos anos, então até mesmo melhorias da ordem de alguns por cento são uma grande vitória para nós. -We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization. +Também esperávamos vitórias na produtividade do desenvolvedor com o React Compiler. Para medir isso, colaboramos com nossos parceiros de ciência de dados na Meta[^2] para conduzir uma análise estatística completa do impacto da memoização manual na produtividade. Antes de implantar o compilador na Meta, descobrimos que apenas cerca de 8% das solicitações de pull do React usavam memoização manual e que essas solicitações de pull levavam de 31 a 46% mais tempo para serem escritas[^3]. Isso confirmou nossa intuição de que a memoização manual introduz sobrecarga cognitiva, e prevemos que o React Compiler levará a uma criação e revisão de código mais eficientes. Notavelmente, o React Compiler também garante que *todo* o código seja memoizado por padrão, não apenas os (em nosso caso) 8% em que os desenvolvedores aplicam explicitamente a memoização. -## Roadmap to Stable {/*roadmap-to-stable*/} +## Roteiro para Estável {/*roadmap-to-stable*/} -*This is not a final roadmap, and is subject to change.* +*Este não é um roteiro final e está sujeito a alterações.* -We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin. +Pretendemos lançar um Release Candidate do compilador num futuro próximo seguindo a versão Beta, quando a maioria dos aplicativos e bibliotecas que seguem as Regras do React tiverem demonstrado funcionar bem com o compilador. Após um período de feedback final da comunidade, planejamos um Lançamento Estável para o compilador. O Lançamento Estável marcará o início de uma nova base para o React, e todos os aplicativos e bibliotecas serão fortemente recomendados a usar o compilador e o plugin ESLint. -* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. -* ✅ Public Beta: Available today, for feedback from the wider community. -* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. -* 🚧 General Availability: After final feedback period from the community. +* ✅ Experimental: Lançado na React Conf 2024, principalmente para feedback dos primeiros usuários. +* ✅ Beta Público: Disponível hoje, para feedback da comunidade em geral. +* 🚧 Release Candidate (RC): React Compiler funciona para a maioria dos aplicativos e bibliotecas que seguem as regras sem problemas. +* 🚧 Disponibilidade Geral: Após o período de feedback final da comunidade. -These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed. +Esses lançamentos também incluem o plugin ESLint do compilador, que mostra diagnósticos analisados estaticamente pelo compilador. Planejamos combinar o plugin eslint-plugin-react-hooks existente com o plugin ESLint do compilador, para que apenas um plugin precise ser instalado. -Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. +Após o Estável, planejamos adicionar mais otimizações e melhorias do compilador. Isso inclui tanto melhorias contínuas na memoização automática, quanto novas otimizações, com mínima ou nenhuma alteração do código do produto. A atualização para cada novo lançamento do compilador visa ser direta, e cada atualização continuará a melhorar o desempenho e adicionar um melhor tratamento de diversos padrões JavaScript e React. -Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post. +Ao longo desse processo, também planejamos prototipar uma extensão IDE para React. Ainda está no início da pesquisa, então esperamos poder compartilhar mais de nossas descobertas com você em um futuro post do blog React Labs. --- -Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post. +Agradecemos a [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent) e [Eli White](https://twitter.com/Eli_White) por revisarem e editarem este post. --- -[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. +[^1]: Obrigado [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi) e vários outros por suas contribuições para o compilador. -[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. +[^2]: Obrigado [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) por liderar este estudo no React Compiler na Meta e por revisar este post. -[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. \ No newline at end of file +[^3]: Após controlar a permanência do autor, comprimento/complexidade da diferença e outros fatores de confusão potenciais. \ No newline at end of file