Compilador do React - Memoização automática que elimina useMemo, useCallback e React.memo manuais

Q: Como habilito o Compilador do React em um projeto Next.js?

Para projetos que não são Next.js, instale babel-plugin-react-compiler e adicione-o à sua configuração Babel.

Q: O que acontece se um componente violar as regras do React (por exemplo, mutar props)?

O compilador ignora silenciosamente esse componente e o deixa não otimizado Ele não quebra seu código -- o componente renderiza como se o compilador não estivesse habilitado Use eslint-plugin-react-compiler para detectar quais componentes estão sendo ignorados e por quê

Q: Como você desativa um componente específico da otimização do compilador?

A diretiva "use no memo" é colocada no topo do corpo da função.

Q: Como você lança gradualmente o compilador com o modo opt-in?

Em seguida, adicione "use memo" no topo das funções que você deseja compilar. Apenas funções anotadas são otimizadas.

Q: O compilador pode ser usado com React 17 ou 18?

Sim. Defina target: "17" ou target: "18" na configuração do plugin Você também deve instalar o pacote react-compiler-runtime O compilador tem como alvo o React 19 por padrão

Receita

# Instale o compilador e seu plugin Babel
npm install -D babel-plugin-react-compiler
npm install -D react-compiler-healthcheck  # opcional: verifica compatibilidade

// babel.config.js
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      // target é "19" por padrão para React 19
    }],
  ],
};

// next.config.js (Next.js 15+)
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

Quando usar isso: Habilite o Compilador do React para qualquer projeto React 19 para otimizar automaticamente as re-renderizações. Ele substitui a necessidade de useMemo, useCallback e React.memo na grande maioria dos casos.

Exemplo de Trabalho

// Antes: Memoização manual em todos os lugares
import { useMemo, useCallback, memo } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
const TodoItem = memo(function TodoItem({
  todo,
  onToggle,
}: {
  todo: Todo;
  onToggle: (id: string) => void;
}) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      {todo.text}
    </li>
  );
});
 
function TodoList({ todos }: { todos: Todo[] }) {
  const [filter, setFilter] = useState<"all" | "active" | "completed">("all");
 
  const filteredTodos = useMemo(() => {
    switch (filter) {
      case "active": return todos.filter((t) => !t.completed);
      case "completed": return todos.filter((t) => t.completed);
      default: return todos;
    }
  }, [todos, filter]);
 
  const handleToggle = useCallback((id: string) => {
    // lógica de alternância
  }, []);
 
  const stats = useMemo(() => ({
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
  }), [todos]);
 
  return (
    <div>
      <p>{stats.active} itens restantes</p>
      <ul>
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
        ))}
      </ul>
    </div>
  );
}

// Depois: Com o Compilador do React -- sem necessidade de memoização manual
import { useState } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
function TodoItem({
  todo,
  onToggle,
}: {
  todo: Todo;
  onToggle: (id: string) => void;
}) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      {todo.text}
    </li>
  );
}
 
function TodoList({ todos }: { todos: Todo[] }) {
  const [filter, setFilter] = useState<"all" | "active" | "completed">("all");
 
  const filteredTodos = (() => {
    switch (filter) {
      case "active": return todos.filter((t) => !t.completed);
      case "completed": return todos.filter((t) => t.completed);
      default: return todos;
    }
  })();
 
  function handleToggle(id: string) {
    // lógica de alternância
  }
 
  const stats = {
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
  };
 
  return (
    <div>
      <p>{stats.active} itens restantes</p>
      <ul>
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
        ))}
      </ul>
    </div>
  );
}

O que isso demonstra:

A versão "antes" requer useMemo, useCallback e React.memo para evitar re-renderizações desnecessárias
A versão "depois" é código React simples e natural -- o compilador adiciona memoização em tempo de compilação
O código é mais simples, fácil de ler e igualmente performático

Mergulho Profundo

Como Funciona

O Compilador do React é uma ferramenta de tempo de compilação (plugin Babel) que analisa seus componentes e hooks, e então insere automaticamente a memoização.
Ele entende as regras de hooks do React e as regras do React (renderização pura, props/estado imutáveis) para determinar quais valores podem ser cacheados com segurança.
O compilador transforma seu código para memoizar: elementos JSX, cálculos caros, funções de callback e re-renderizações de componentes -- aproximadamente equivalente a envolver coisas em useMemo, useCallback e React.memo onde apropriado.
Ele realiza memoização granular -- pode memoizar subárvores JSX individuais dentro de um componente, não apenas o valor de retorno inteiro.
O compilador tem como alvo o React 19 por padrão e usa a API de cache interna do React 19. Para React 17 e 18, defina target: "17" ou target: "18" e instale o pacote react-compiler-runtime.
Se o compilador detectar código que viola as regras do React (por exemplo, mutando props, efeitos colaterais durante a renderização), ele ignora esse componente e o deixa não otimizado. Ele não quebra seu código.
Você pode usar a diretiva "use no memo" no topo de uma função para desativar um componente ou hook específico da otimização do compilador.

Variações

Lançamento gradual com modo opt-in:

// babel.config.js -- compila apenas arquivos com a diretiva "use memo"
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      compilationMode: "annotation",  // compila apenas funções "use memo"
    }],
  ],
};

// Apenas este componente é compilado
function OptimizedList({ items }: { items: string[] }) {
  "use memo";
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Desativando um componente específico:

function LegacyComponent({ data }: { data: any }) {
  "use no memo";
  // Este componente não será otimizado pelo compilador
  // Útil para código que intencionalmente quebra as regras do React
  externalMutableStore.value = data;
  return <div>{data.label}</div>;
}

Verificação de saúde antes de adotar:

# Execute a verificação de saúde para ver quão compatível seu codebase é
npx react-compiler-healthcheck --verbose

Plugin ESLint para validação de regras:

npm install -D eslint-plugin-react-compiler

// eslint.config.js
import reactCompiler from "eslint-plugin-react-compiler";
 
export default [
  {
    plugins: { "react-compiler": reactCompiler },
    rules: {
      "react-compiler/react-compiler": "error",
    },
  },
];

Notas sobre TypeScript

O compilador funciona com TypeScript pronto para uso -- ele é executado após a compilação do TypeScript (no pipeline Babel) ou se integra com SWC no Next.js.
Nenhuma alteração de tipo é necessária. As transformações do compilador são transparentes para o sistema de tipos.
"use memo" e "use no memo" são diretivas de string literal (como "use strict") e não precisam de declarações de tipo.

Armadilhas

Mutação de objetos ou arrays durante a renderização -- O compilador assume renderização pura. Mutar props, estado ou variáveis compartilhadas entre renderizações causa cache incorreto. Correção: Siga as regras do React -- sempre crie novos objetos/arrays em vez de mutar. O plugin ESLint captura a maioria das violações.
Efeitos colaterais durante a renderização -- Código como console.log(Date.now()) ou modificação de variáveis externas durante a renderização pode produzir resultados desatualizados quando o compilador cacheia a saída. Correção: Mova efeitos colaterais para useEffect ou manipuladores de eventos.
Stores mutáveis externos -- Ler de variáveis globais mutáveis ou stores que o React não rastreia (por exemplo, um objeto global simples) pode quebrar sob a otimização do compilador. Correção: Use useSyncExternalStore para estado mutável externo.
useMemo/useCallback existentes não são prejudiciais -- Se você já possui memoização manual, o compilador funciona com ela. Você não precisa removê-la antes de habilitar o compilador. Correção: Opcionalmente, remova a memoização manual para um código mais limpo, mas não é obrigatório.
Nem todo código é compilado -- Componentes que violam as regras do React são ignorados silenciosamente. Você pode não perceber que um componente não está otimizado. Correção: Use eslint-plugin-react-compiler para capturar problemas e verifique a saída de compilação do compilador para componentes ignorados.
Aumento do tempo de compilação -- O compilador adiciona tempo de análise à sua compilação. Em bases de código muito grandes, isso pode ser perceptível. Correção: Use a opção compilationMode: "annotation" para compilar apenas componentes com opt-in durante a migração.

Alternativas

Abordagem	Quando escolher
Compilador do React	Padrão para projetos React 19 -- otimização automática e sem esforço
`useMemo` / `useCallback` manual	React 18 ou quando você precisa de controle explícito sobre o que é memoizado
`React.memo`	React 18 ou para componentes de classe que o compilador não lida
Million.js	Compilador alternativo focado na otimização de diffing do DOM virtual
Divisão manual de componentes	Isolando subárvores caras quando o compilador ou a memoização são insuficientes
Diretiva `"use no memo"`	Desativando componentes específicos da otimização do compilador

FAQs

O que o Compilador do React faz em um alto nível?

É um plugin Babel em tempo de compilação que analisa componentes e hooks, e então insere automaticamente a memoização
Substitui a necessidade de useMemo, useCallback e React.memo manuais na maioria dos casos
Realiza memoização granular -- pode memoizar subárvores JSX individuais, não apenas o valor de retorno inteiro

Como habilito o Compilador do React em um projeto Next.js?

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

Para projetos que não são Next.js, instale babel-plugin-react-compiler e adicione-o à sua configuração Babel.

Preciso remover chamadas existentes de useMemo, useCallback e React.memo?

Não. O compilador funciona em conjunto com a memoização manual existente
Você pode opcionalmente removê-las para um código mais limpo, mas não é obrigatório
O compilador não entrará em conflito nem fará dupla memoização dessas chamadas

O que acontece se um componente violar as regras do React (por exemplo, mutar props)?

O compilador ignora silenciosamente esse componente e o deixa não otimizado
Ele não quebra seu código -- o componente renderiza como se o compilador não estivesse habilitado
Use eslint-plugin-react-compiler para detectar quais componentes estão sendo ignorados e por quê

Como você desativa um componente específico da otimização do compilador?

function LegacyComponent({ data }) {
  "use no memo";
  // Este componente não será otimizado
  externalStore.value = data;
  return <div>{data.label}</div>;
}

A diretiva "use no memo" é colocada no topo do corpo da função.

Como você lança gradualmente o compilador com o modo opt-in?

// babel.config.js
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      compilationMode: "annotation",
    }],
  ],
};

Em seguida, adicione "use memo" no topo das funções que você deseja compilar. Apenas funções anotadas são otimizadas.

Como verificar se seu codebase é compatível com o compilador?

npx react-compiler-healthcheck --verbose

Isso escaneia seu codebase e relata quais componentes seguem as regras do React e quais podem causar problemas.

O compilador pode ser usado com React 17 ou 18?

Sim. Defina target: "17" ou target: "18" na configuração do plugin
Você também deve instalar o pacote react-compiler-runtime
O compilador tem como alvo o React 19 por padrão

Armadilha: Por que um console.log dentro do meu componente mostra valores desatualizados após habilitar o compilador?

O compilador cacheia a saída da renderização quando as entradas não mudaram
Efeitos colaterais como console.log(Date.now()) durante a renderização podem produzir resultados desatualizados
Mova efeitos colaterais para useEffect ou manipuladores de eventos onde eles pertencem

Armadilha: Meu componente lê de uma variável global mutável e retorna dados desatualizados com o compilador. Por quê?

O compilador assume renderização pura e não rastreia stores mutáveis externos
Ler de objetos globais simples que o React não gerencia quebra sob a otimização do compilador
Use useSyncExternalStore para estado mutável externo para que o React possa rastrear mudanças

O compilador afeta os tipos TypeScript ou requer mudanças de tipo?

Não. As transformações do compilador são transparentes para o sistema de tipos
Ele é executado após a compilação do TypeScript (no pipeline Babel) ou se integra com SWC no Next.js
"use memo" e "use no memo" são diretivas de string literal e não precisam de declarações de tipo

O Compilador do React aumenta os tempos de compilação?

Sim, ele adiciona tempo de análise à compilação
Em bases de código muito grandes, isso pode ser perceptível
Use compilationMode: "annotation" para compilar apenas componentes com opt-in durante uma migração incremental

Relacionado

Visão Geral -- Lista completa de recursos do React 19
Server Components -- Server Components não enviam JS, então a memoização é menos relevante lá
Ref como Prop -- Outra simplificação de API no React 19

Receita

# Instale o compilador e seu plugin Babel
npm install -D babel-plugin-react-compiler
npm install -D react-compiler-healthcheck  # opcional: verifica compatibilidade

// babel.config.js
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      // target é "19" por padrão para React 19
    }],
  ],
};

// next.config.js (Next.js 15+)
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

Exemplo de Trabalho

// Antes: Memoização manual em todos os lugares
import { useMemo, useCallback, memo } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
const TodoItem = memo(function TodoItem({
  todo,
  onToggle,
}: {
  todo: Todo;
  onToggle: (id: string) => void;
}) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      {todo.text}
    </li>
  );
});
 
function TodoList({ todos }: { todos: Todo[] }) {
  const [filter, setFilter] = useState<"all" | "active" | "completed">("all");
 
  const filteredTodos = useMemo(() => {
    switch (filter) {
      case "active": return todos.filter((t) => !t.completed);
      case "completed": return todos.filter((t) => t.completed);
      default: return todos;
    }
  }, [todos, filter]);
 
  const handleToggle = useCallback((id: string) => {
    // lógica de alternância
  }, []);
 
  const stats = useMemo(() => ({
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
  }), [todos]);
 
  return (
    <div>
      <p>{stats.active} itens restantes</p>
      <ul>
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
        ))}
      </ul>
    </div>
  );
}

// Depois: Com o Compilador do React -- sem necessidade de memoização manual
import { useState } from "react";
 
type Todo = { id: string; text: string; completed: boolean };
 
function TodoItem({
  todo,
  onToggle,
}: {
  todo: Todo;
  onToggle: (id: string) => void;
}) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      {todo.text}
    </li>
  );
}
 
function TodoList({ todos }: { todos: Todo[] }) {
  const [filter, setFilter] = useState<"all" | "active" | "completed">("all");
 
  const filteredTodos = (() => {
    switch (filter) {
      case "active": return todos.filter((t) => !t.completed);
      case "completed": return todos.filter((t) => t.completed);
      default: return todos;
    }
  })();
 
  function handleToggle(id: string) {
    // lógica de alternância
  }
 
  const stats = {
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
  };
 
  return (
    <div>
      <p>{stats.active} itens restantes</p>
      <ul>
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
        ))}
      </ul>
    </div>
  );
}

O que isso demonstra:

A versão "antes" requer useMemo, useCallback e React.memo para evitar re-renderizações desnecessárias
A versão "depois" é código React simples e natural -- o compilador adiciona memoização em tempo de compilação
O código é mais simples, fácil de ler e igualmente performático

Mergulho Profundo

Como Funciona

O Compilador do React é uma ferramenta de tempo de compilação (plugin Babel) que analisa seus componentes e hooks, e então insere automaticamente a memoização.
Ele entende as regras de hooks do React e as regras do React (renderização pura, props/estado imutáveis) para determinar quais valores podem ser cacheados com segurança.
O compilador transforma seu código para memoizar: elementos JSX, cálculos caros, funções de callback e re-renderizações de componentes -- aproximadamente equivalente a envolver coisas em useMemo, useCallback e React.memo onde apropriado.
Ele realiza memoização granular -- pode memoizar subárvores JSX individuais dentro de um componente, não apenas o valor de retorno inteiro.
O compilador tem como alvo o React 19 por padrão e usa a API de cache interna do React 19. Para React 17 e 18, defina target: "17" ou target: "18" e instale o pacote react-compiler-runtime.
Se o compilador detectar código que viola as regras do React (por exemplo, mutando props, efeitos colaterais durante a renderização), ele ignora esse componente e o deixa não otimizado. Ele não quebra seu código.
Você pode usar a diretiva "use no memo" no topo de uma função para desativar um componente ou hook específico da otimização do compilador.

Variações

Lançamento gradual com modo opt-in:

// babel.config.js -- compila apenas arquivos com a diretiva "use memo"
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      compilationMode: "annotation",  // compila apenas funções "use memo"
    }],
  ],
};

// Apenas este componente é compilado
function OptimizedList({ items }: { items: string[] }) {
  "use memo";
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

Desativando um componente específico:

function LegacyComponent({ data }: { data: any }) {
  "use no memo";
  // Este componente não será otimizado pelo compilador
  // Útil para código que intencionalmente quebra as regras do React
  externalMutableStore.value = data;
  return <div>{data.label}</div>;
}

Verificação de saúde antes de adotar:

# Execute a verificação de saúde para ver quão compatível seu codebase é
npx react-compiler-healthcheck --verbose

Plugin ESLint para validação de regras:

npm install -D eslint-plugin-react-compiler

// eslint.config.js
import reactCompiler from "eslint-plugin-react-compiler";
 
export default [
  {
    plugins: { "react-compiler": reactCompiler },
    rules: {
      "react-compiler/react-compiler": "error",
    },
  },
];

Notas sobre TypeScript

O compilador funciona com TypeScript pronto para uso -- ele é executado após a compilação do TypeScript (no pipeline Babel) ou se integra com SWC no Next.js.
Nenhuma alteração de tipo é necessária. As transformações do compilador são transparentes para o sistema de tipos.
"use memo" e "use no memo" são diretivas de string literal (como "use strict") e não precisam de declarações de tipo.

Armadilhas

Mutação de objetos ou arrays durante a renderização -- O compilador assume renderização pura. Mutar props, estado ou variáveis compartilhadas entre renderizações causa cache incorreto. Correção: Siga as regras do React -- sempre crie novos objetos/arrays em vez de mutar. O plugin ESLint captura a maioria das violações.
Efeitos colaterais durante a renderização -- Código como console.log(Date.now()) ou modificação de variáveis externas durante a renderização pode produzir resultados desatualizados quando o compilador cacheia a saída. Correção: Mova efeitos colaterais para useEffect ou manipuladores de eventos.
Stores mutáveis externos -- Ler de variáveis globais mutáveis ou stores que o React não rastreia (por exemplo, um objeto global simples) pode quebrar sob a otimização do compilador. Correção: Use useSyncExternalStore para estado mutável externo.
useMemo/useCallback existentes não são prejudiciais -- Se você já possui memoização manual, o compilador funciona com ela. Você não precisa removê-la antes de habilitar o compilador. Correção: Opcionalmente, remova a memoização manual para um código mais limpo, mas não é obrigatório.
Nem todo código é compilado -- Componentes que violam as regras do React são ignorados silenciosamente. Você pode não perceber que um componente não está otimizado. Correção: Use eslint-plugin-react-compiler para capturar problemas e verifique a saída de compilação do compilador para componentes ignorados.
Aumento do tempo de compilação -- O compilador adiciona tempo de análise à sua compilação. Em bases de código muito grandes, isso pode ser perceptível. Correção: Use a opção compilationMode: "annotation" para compilar apenas componentes com opt-in durante a migração.

Alternativas

Abordagem	Quando escolher
Compilador do React	Padrão para projetos React 19 -- otimização automática e sem esforço
`useMemo` / `useCallback` manual	React 18 ou quando você precisa de controle explícito sobre o que é memoizado
`React.memo`	React 18 ou para componentes de classe que o compilador não lida
Million.js	Compilador alternativo focado na otimização de diffing do DOM virtual
Divisão manual de componentes	Isolando subárvores caras quando o compilador ou a memoização são insuficientes
Diretiva `"use no memo"`	Desativando componentes específicos da otimização do compilador

FAQs

O que o Compilador do React faz em um alto nível?

É um plugin Babel em tempo de compilação que analisa componentes e hooks, e então insere automaticamente a memoização
Substitui a necessidade de useMemo, useCallback e React.memo manuais na maioria dos casos
Realiza memoização granular -- pode memoizar subárvores JSX individuais, não apenas o valor de retorno inteiro

Como habilito o Compilador do React em um projeto Next.js?

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

Para projetos que não são Next.js, instale babel-plugin-react-compiler e adicione-o à sua configuração Babel.

Preciso remover chamadas existentes de useMemo, useCallback e React.memo?

Não. O compilador funciona em conjunto com a memoização manual existente
Você pode opcionalmente removê-las para um código mais limpo, mas não é obrigatório
O compilador não entrará em conflito nem fará dupla memoização dessas chamadas

O que acontece se um componente violar as regras do React (por exemplo, mutar props)?

O compilador ignora silenciosamente esse componente e o deixa não otimizado
Ele não quebra seu código -- o componente renderiza como se o compilador não estivesse habilitado
Use eslint-plugin-react-compiler para detectar quais componentes estão sendo ignorados e por quê

Como você desativa um componente específico da otimização do compilador?

function LegacyComponent({ data }) {
  "use no memo";
  // Este componente não será otimizado
  externalStore.value = data;
  return <div>{data.label}</div>;
}

A diretiva "use no memo" é colocada no topo do corpo da função.

Como você lança gradualmente o compilador com o modo opt-in?

// babel.config.js
module.exports = {
  plugins: [
    ["babel-plugin-react-compiler", {
      compilationMode: "annotation",
    }],
  ],
};

Em seguida, adicione "use memo" no topo das funções que você deseja compilar. Apenas funções anotadas são otimizadas.

Como verificar se seu codebase é compatível com o compilador?

npx react-compiler-healthcheck --verbose

Isso escaneia seu codebase e relata quais componentes seguem as regras do React e quais podem causar problemas.

O compilador pode ser usado com React 17 ou 18?

Sim. Defina target: "17" ou target: "18" na configuração do plugin
Você também deve instalar o pacote react-compiler-runtime
O compilador tem como alvo o React 19 por padrão

Armadilha: Por que um console.log dentro do meu componente mostra valores desatualizados após habilitar o compilador?

O compilador cacheia a saída da renderização quando as entradas não mudaram
Efeitos colaterais como console.log(Date.now()) durante a renderização podem produzir resultados desatualizados
Mova efeitos colaterais para useEffect ou manipuladores de eventos onde eles pertencem

Armadilha: Meu componente lê de uma variável global mutável e retorna dados desatualizados com o compilador. Por quê?

O compilador assume renderização pura e não rastreia stores mutáveis externos
Ler de objetos globais simples que o React não gerencia quebra sob a otimização do compilador
Use useSyncExternalStore para estado mutável externo para que o React possa rastrear mudanças

O compilador afeta os tipos TypeScript ou requer mudanças de tipo?

Não. As transformações do compilador são transparentes para o sistema de tipos
Ele é executado após a compilação do TypeScript (no pipeline Babel) ou se integra com SWC no Next.js
"use memo" e "use no memo" são diretivas de string literal e não precisam de declarações de tipo

O Compilador do React aumenta os tempos de compilação?

Sim, ele adiciona tempo de análise à compilação
Em bases de código muito grandes, isso pode ser perceptível
Use compilationMode: "annotation" para compilar apenas componentes com opt-in durante uma migração incremental

Relacionado

Visão Geral -- Lista completa de recursos do React 19
Server Components -- Server Components não enviam JS, então a memoização é menos relevante lá
Ref como Prop -- Outra simplificação de API no React 19

Compilador do React - Memoização automática que elimina useMemo, useCallback e React.memo manuais

Buscar na documentação

Compilador do React - Memoização automática que elimina useMemo, useCallback e React.memo manuais