Introdução

O que o React Compiler faz?

O React Compiler otimiza automaticamente sua aplicação React em tempo de build. O React é frequentemente rápido o suficiente sem otimização, mas às vezes você precisa memoizar manualmente componentes e valores para manter sua aplicação responsiva. Esta memoização manual é tediosa, fácil de errar e adiciona código extra para manter. O React Compiler faz essa otimização automaticamente para você, liberando você dessa carga mental para que possa focar na construção de funcionalidades.

Antes do React Compiler

Sem o compilador, você precisa memoizar manualmente componentes e valores para otimizar re-renderizações:

import { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);

  const handleClick = useCallback((item) => {
    onClick(item.id);
  }, [onClick]);

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

Depois do React Compiler

Com o React Compiler, você escreve o mesmo código sem memoização manual:

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

Veja este exemplo no React Compiler Playground

O React Compiler aplica automaticamente as otimizações equivalentes, garantindo que sua aplicação só re-renderize quando necessário.

function FriendList({ friends }) {
  const onlineCount = useFriendOnlineCount();
  if (friends.length === 0) {
    return <NoFriends />;
  }
  return (
    <div>
      <span>{onlineCount} online</span>
      {friends.map((friend) => (
        <FriendListCard key={friend.id} friend={friend} />
      ))}
      <MessageButton />
    </div>
  );
}

// **Não** memoizado pelo React Compiler, pois isso não é um componente ou hook
function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }

// Memoizado pelo React Compiler pois isso é um componente
function TableContainer({ items }) {
  // Esta chamada de função seria memoizada:
  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
  // ...
}

Devo experimentar o compilador?

Encorajamos todos a começar a usar o React Compiler. Embora o compilador ainda seja uma adição opcional ao React hoje, no futuro algumas funcionalidades podem exigir o compilador para funcionar completamente.

É seguro usar?

O React Compiler está agora em RC e foi testado extensivamente em produção. Embora tenha sido usado em produção em empresas como a Meta, implementar o compilador em produção para sua aplicação dependerá da saúde de sua base de código e de quão bem você seguiu as Regras do React.

Quais ferramentas de build são suportadas?

O React Compiler pode ser instalado em várias ferramentas de build como 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 swc e oxc para construir suporte de primeira classe para o React Compiler, então você não precisará adicionar o Babel de volta aos seus pipelines de build no futuro.

Usuários do Next.js podem habilitar o React Compiler invocado pelo swc usando v15.3.1 ou superior.

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

Se você está usando o React Compiler, useMemo, useCallback e React.memo podem ser removidos. O React Compiler adiciona memoização automática de forma mais precisa e granular do que é possível com esses hooks. Se você escolher manter a memoização manual, o React Compiler irá analisá-la e determinar se sua memoização manual corresponde à sua memoização automaticamente inferida. Se não houver correspondência, o compilador escolherá não otimizar esse componente.

Isso é feito por precaução, pois um anti-padrão comum com memoização manual é usá-la para correção. Isso significa que sua aplicação depende de valores específicos sendo memoizados para funcionar adequadamente. Por exemplo, para prevenir um loop infinito, você pode ter memoizado alguns valores para impedir que uma chamada useEffect seja disparada. Isso quebra as Regras do React, mas como pode ser potencialmente perigoso para o compilador remover automaticamente a memoização manual, o compilador simplesmente não otimizará. Você deve remover manualmente sua memoização escrita à mão e verificar que sua aplicação ainda funciona como esperado.

Experimente o React Compiler

Esta seção irá ajudá-lo 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 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 verificar o Grupo de Trabalho do React Compiler para informações adicionais e discussões sobre o compilador.