React Labs: O que Estamos Trabalhando – Fevereiro de 2024
Nos posts do React Labs, escrevemos sobre projetos em pesquisa e desenvolvimento ativos. Fizemos progresso significativo desde nossa última atualização e gostaríamos de compartilhar nosso progresso.
15 de fevereiro de 2024 por Joseph Savona, Ricky Hanlon, Andrew Clark, Matt Carroll, e Dan Abramov.
Nos posts do React Labs, escrevemos sobre projetos em pesquisa e desenvolvimento ativos. Fizemos progresso significativo desde nossa última atualização e gostaríamos de compartilhar nosso progresso.
React Compiler
O React Compiler não é mais um projeto de pesquisa: o compilador agora alimenta instagram.com em produção, e estamos trabalhando para implementar o compilador em superfícies adicionais no Meta e preparar o primeiro lançamento de código aberto.
Como discutido em nosso post anterior, o React às vezes pode re-renderizar demais quando o estado muda. Desde os primeiros dias do React, nossa solução para tais casos tem sido a memoização manual. Em nossas APIs atuais, isso significa aplicar as APIs useMemo, useCallback e memo para ajustar manualmente quanto o React re-renderiza nas mudanças de estado. Mas a memoização manual é um compromisso. Ela bagunça nosso código, é fácil de errar e requer trabalho extra para manter atualizada.
A memoização manual é um compromisso razoável, mas não estávamos satisfeitos. Nossa visão é que o React re-renderize automaticamente apenas as partes certas da UI quando o estado muda, sem comprometer o modelo mental central do React. Acreditamos que a abordagem do React — UI como uma função simples do estado, com valores e expressões JavaScript padrão — é uma parte chave do motivo pelo qual o React tem sido acessível para tantos desenvolvedores. É por isso que investimos na construção de um compilador otimizador para o React.
JavaScript é uma linguagem notoriamente desafiadora para otimizar, graças às suas regras frágeis e natureza dinâmica. O React Compiler é capaz de compilar código de forma segura modelando tanto as regras do JavaScript quanto as “regras do React”. Por exemplo, componentes React devem ser idempotentes — retornando o mesmo valor dados os mesmos inputs — e não podem mutar props ou valores de estado. Essas regras limitam o que os desenvolvedores podem fazer e ajudam a criar um espaço seguro para o compilador otimizar.
É claro que