Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça para ele configurar tudo para você. O React 19 introduz mudanças incompatíveis com versões anteriores na forma de lidar com refs, uso de contexto, tipos TypeScript e APIs legadas que foram removidas. O [guia oficial de atualização](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) documenta todas as mudanças, mas a parte difícil é mapear essas mudanças para o *seu* código. Em vez de ler o guia você mesmo e inspecionar cada componente, forneça ambos ao Devin e receba de volta um playbook específico para os arquivos do seu projeto. Abra uma nova sessão do Devin na [página inicial do Devin](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) e cole um prompt com a URL do guia de atualização e o que você precisa: ```txt Build React 18→19 upgrade playbook theme={null} We're upgrading our React app from v18 to v19. Here's the official upgrade guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide Build a migration playbook specific to our codebase: - Install react@18.3 first and fix every deprecation warning before touching v19 - Find all uses of forwardRef and plan the ref-as-prop migration - Identify components using the legacy Context API (contextTypes, getChildContext) that need conversion to createContext - Flag any string ref usage or legacy lifecycle methods - List TypeScript files that need updated ref types (e.g., removing RefObject in favor of RefObject | null) - Order the steps so we can ship incrementally — deprecation fixes first, then API removals, then new features - Include a validation step after each phase ``` O Devin avançado usa o [DeepWiki](/pt-BR/work-with-devin/deepwiki) para entender automaticamente a arquitetura do seu repositório. Ele também pode buscar fontes online sobre o React 19 — o guia oficial de atualização, posts de blog, changelogs de bibliotecas — e incorporar o que encontrar diretamente no playbook. Para deixar o playbook ainda mais preciso, diga ao Devin quais padrões a migração vai afetar: * *"Usamos `forwardRef` em 23 componentes em `src/components/ui/` — esses são os primitivos do nosso design system"* * *"Ainda temos 4 componentes de classe em `src/legacy/` que usam refs em string e `componentWillMount`"* * *"Verifique outros repositórios na nossa organização (por exemplo, `acme/design-system`, `acme/admin-dashboard`) para ver se eles já começaram a migração para o React 19 — reutilize quaisquer padrões que eles tenham estabelecido"* Se alguma dependência tiver seu próprio guia de compatibilidade com o React 19 (por exemplo, React Router, React Hook Form ou sua biblioteca de UI), cole essas URLs no prompt também — o Devin lê todas e correlaciona as breaking changes. Devin lê o guia de atualização para o React 19 de ponta a ponta, cruza cada mudança incompatível com a sua base de código por meio do [DeepWiki](/pt-BR/work-with-devin/deepwiki) e gera um playbook em fases com arquivos específicos, estimativas de complexidade e etapas de validação: ```markdown theme={null} # Playbook de Migração React 18 → 19 ## Fase 1: Atualizar para React 18.3 e corrigir avisos de depreciação (S) - npm install react@18.3 react-dom@18.3 - Execute o app e corrija todos os avisos de depreciação no console: - Remova string refs em src/legacy/OldModal.tsx, src/legacy/OldTooltip.tsx - Substitua ReactDOM.findDOMNode em src/legacy/DropdownMenu.tsx - Execute o conjunto de testes para confirmar que não há regressões - Validação: Zero avisos de depreciação no console de desenvolvimento, todos os testes passam ## Fase 2: Migrar forwardRef para ref-as-prop (M) - Remova os wrappers forwardRef de 23 componentes em src/components/ui/: - Button.tsx, Input.tsx, Select.tsx, TextArea.tsx (uso alto) - Modal.tsx, Popover.tsx, Tooltip.tsx (uso médio) - +16 componentes adicionais (lista completa abaixo) - Passe ref como uma prop regular em vez de envolver em forwardRef - Atualize os tipos TypeScript: altere RefObject para RefObject | null - Atualize src/types/refs.d.ts para corresponder à nova semântica de ref do React 19 - Validação: Todos os componentes com ref-forwarding renderizam, gerenciamento de foco funciona ## Fase 3: Remover APIs depreciadas (M) - Substitua o Context legado (contextTypes/getChildContext) em: - src/legacy/ThemeProvider.tsx → já usa createContext (sem alteração) - src/legacy/LocaleContext.tsx → converter para o padrão createContext - Remova propTypes de 12 arquivos (TypeScript cuida da validação) - Remova defaultProps de componentes de função (use padrões do JS) - Validação: Valores de Context propagam corretamente, sem avisos em tempo de execução ## Fase 4: Atualizar padrões de busca de dados e Suspense (L) - Revise os limites de Suspense em src/components/layouts/ - Atualize quaisquer componentes que dependam de mudanças no comportamento de fallback - Teste rotas carregadas de forma lazy em src/routes/ com a nova semântica de Suspense - Validação: Todas as rotas lazy carregam, estados de carregamento renderizam corretamente ## Fase 5: Instalar React 19 e adotar novos recursos (M) - npm install react@19 react-dom@19 - Substitua useFormState por useActionState em src/hooks/useFormField.ts - Atualize os imports do react-dom: ReactDOM.render → já usando createRoot - Ative a nova transformação JSX se ainda não estiver ativa - Validação: Conjunto completo de testes passa, app executa sem erros ## Fase 6: Atualizar bibliotecas de terceiros (L) - react-hook-form → atualizar para v8 (compatível com React 19) - @radix-ui/react-* → atualizar para a versão mais recente (suporte a ref-as-prop) - react-router-dom → verificar compatibilidade com v6.4+ - Validação: Formulários são enviados corretamente, primitivos de UI renderizam, roteamento funciona ## Riscos - A remoção do forwardRef é a mudança de maior volume — 23 componentes, muitos consumidos por outras equipes - Mudanças nos tipos de ref do TypeScript podem expor problemas de null safety - O react-hook-form v8 tem suas próprias breaking changes — teste a validação de formulários minuciosamente ``` O playbook é um plano, não uma migração já realizada. Revise-o com sua equipe, ajuste o planejamento por fases ou o escopo e, em seguida, decida como executar. Quando o playbook estiver correto, salve-o e anexe-o a uma sessão para executá-lo fase a fase: ```txt Execute o playbook de migração para React 19 theme={null} Comece a executar o playbook de migração, iniciando pela Fase 1 (atualizar para React 18.3 e corrigir avisos de descontinuação). Após cada fase, execute o servidor de desenvolvimento e toda a suíte de testes. Só avance para a próxima fase se tudo estiver passando. Abra um PR quando terminar. ``` **Escalonar entre repositórios** — Se você tiver vários apps React que precisam da mesma atualização, peça ao Devin para executar o playbook salvo em todos eles em paralelo usando [Devins gerenciados](/pt-BR/work-with-devin/advanced-capabilities#managed-devins).

{title}