Skip to main content

Crear un playbook de actualización de React 18 a 19

Convierte la guía oficial de actualización a React 19 en un playbook por fases adaptado a tu base de código.
AuthorCognition
CategoryMigraciones
FeaturesAvanzado, Playbooks
1

Indica a Advanced Devin que use la guía de actualización a React 19

React 19 introduce cambios incompatibles hacia atrás en el manejo de refs, uso de Context, tipos de TypeScript y eliminación de APIs heredadas. La guía de actualización oficial documenta cada cambio, pero la parte difícil es trasladar esos cambios a tu código. En lugar de leer la guía tú mismo y auditar cada componente, proporciónale ambos a Advanced Devin y obtén un plan de acción adaptado específicamente a tus archivos reales.Abre Advanced Devin haciendo clic en el botón Advanced debajo del cuadro de entrada en la página principal de Devin, luego pega un prompt con la URL de la guía de actualización y lo que necesitas:
2

Añade contexto específico de la base de código

Advanced Devin usa DeepWiki para entender automáticamente la arquitectura de tu repositorio. También puede consultar fuentes en línea sobre React 19 — la guía oficial de actualización, artículos de blog, changelogs de bibliotecas — e incorporar lo que encuentra directamente en el playbook.Para hacer el playbook aún más preciso, dile a Devin qué patrones tocará la migración:
  • “Usamos forwardRef en 23 componentes dentro de src/components/ui/ — estas son las primitivas de nuestro sistema de diseño”
  • “Todavía tenemos 4 componentes de clase en src/legacy/ que usan refs de tipo string y componentWillMount”
  • “Revisa otros repositorios en nuestra organización (por ejemplo, acme/design-system, acme/admin-dashboard) para ver si ya han empezado la migración a React 19 — reutiliza cualquier patrón que hayan establecido”
Si alguna dependencia tiene su propia guía de compatibilidad con React 19 (por ejemplo, React Router, React Hook Form o tu biblioteca de UI), pega también esas URL en el prompt — Devin las lee todas y cruza la información sobre los cambios incompatibles.
3

Revisa el playbook específico de esta base de código

Devin lee de principio a fin la guía de actualización a React 19, contrasta cada cambio incompatible con tu base de código mediante DeepWiki y produce un plan por fases con archivos específicos, estimaciones de complejidad y pasos de validación:
# React 18 → 19 Migration Playbook

## Phase 1: Upgrade to React 18.3 and fix deprecation warnings (S)
- npm install react@18.3 react-dom@18.3
- Run the app and fix all console deprecation warnings:
  - Remove string refs in src/legacy/OldModal.tsx, src/legacy/OldTooltip.tsx
  - Replace ReactDOM.findDOMNode in src/legacy/DropdownMenu.tsx
- Run test suite to confirm no regressions
- Validation: Zero deprecation warnings in dev console, all tests pass

## Phase 2: Migrate forwardRef to ref-as-prop (M)
- Remove forwardRef wrappers from 23 components in src/components/ui/:
  - Button.tsx, Input.tsx, Select.tsx, TextArea.tsx (high usage)
  - Modal.tsx, Popover.tsx, Tooltip.tsx (medium usage)
  - +16 more components (full list below)
- Pass ref as a regular prop instead of wrapping in forwardRef
- Update TypeScript types: change RefObject<T> to RefObject<T> | null
- Update src/types/refs.d.ts to match new React 19 ref semantics
- Validation: All ref-forwarding components render, focus management works

## Phase 3: Remove deprecated APIs (M)
- Replace legacy Context (contextTypes/getChildContext) in:
  - src/legacy/ThemeProvider.tsx → already uses createContext (no change)
  - src/legacy/LocaleContext.tsx → convert to createContext pattern
- Remove propTypes from 12 files (TypeScript handles validation)
- Remove defaultProps from function components (use JS defaults)
- Validation: Context values propagate correctly, no runtime warnings

## Phase 4: Update data fetching and Suspense patterns (L)
- Review Suspense boundaries in src/components/layouts/
- Update any components relying on fallback behavior changes
- Test lazy-loaded routes in src/routes/ with new Suspense semantics
- Validation: All lazy routes load, loading states render correctly

## Phase 5: Install React 19 and adopt new features (M)
- npm install react@19 react-dom@19
- Replace useFormState with useActionState in src/hooks/useFormField.ts
- Update react-dom imports: ReactDOM.render → already using createRoot
- Enable the new JSX transform if not already active
- Validation: Full test suite passes, app runs without errors

## Phase 6: Update third-party libraries (L)
- react-hook-form → upgrade to v8 (React 19 compatible)
- @radix-ui/react-* → upgrade to latest (ref-as-prop support)
- react-router-dom → verify v6.4+ compatibility
- Validation: Forms submit correctly, UI primitives render, routing works

## Risks
- forwardRef removal is highest-volume change — 23 components, many
  consumed by other teams
- TypeScript ref type changes may surface null-safety issues
- react-hook-form v8 has its own breaking changes — test form
  validation thoroughly
El playbook es un plan, no una migración ya realizada. Revísalo con tu equipo, ajusta las fases o el alcance y luego define cómo ejecutarlo.
4

Ejecución y escalado

Cuando el playbook esté listo, guárdalo y asígnalo a una sesión para ejecutarlo fase por fase:Escalar en varios repositorios — Si tienes varias apps de React que necesitan la misma actualización, usa las batch sessions de Advanced Devin para ejecutar el playbook guardado en todas ellas en paralelo.