Skip to main content

Crea un playbook di aggiornamento da React 18 a 19

Trasforma la guida ufficiale all'aggiornamento a React 19 in un playbook per fasi mappato sulla nostra codebase.
AuthorCognition
CategoryMigrazioni
FeaturesAvanzato, Playbook
1

Usa la guida all’aggiornamento a React 19 come prompt per Advanced Devin

React 19 introduce modifiche incompatibili nella gestione delle ref, nell’uso del context, nei tipi TypeScript e nelle API legacy rimosse. La guida ufficiale all’aggiornamento documenta ogni cambiamento, ma la parte difficile è collegare queste modifiche al tuo codice. Invece di leggere personalmente la guida e controllare ogni componente, fornisci entrambi a Advanced Devin e ricevi un playbook mirato ai tuoi file effettivi.Apri Advanced Devin facendo clic sul pulsante Advanced sotto il campo di input nella home page di Devin, poi incolla un prompt con l’URL della guida all’aggiornamento e quello di cui hai bisogno:
2

Aggiungi contesto specifico della codebase

Advanced Devin utilizza DeepWiki per comprendere automaticamente l’architettura del tuo repo. Può anche consultare fonti online su React 19 — la guida ufficiale all’aggiornamento, post di blog, changelog delle librerie — e incorporare ciò che trova direttamente nel playbook.Per rendere il playbook ancora più preciso, descrivi a Devin i pattern che la migrazione toccherà:
  • “Usiamo forwardRef in 23 componenti sotto src/components/ui/ — queste sono le primitive del nostro design system”
  • “Abbiamo ancora 4 class components in src/legacy/ che usano string refs e componentWillMount”
  • “Controlla gli altri repo nella nostra organizzazione (ad es., acme/design-system, acme/admin-dashboard) per vedere se hanno già iniziato la migrazione a React 19 — riutilizza qualsiasi pattern che hanno definito”
Se alcune dipendenze hanno proprie guide di compatibilità con React 19 (ad es., React Router, React Hook Form o la tua libreria UI), incolla anche quegli URL nel prompt — Devin li legge tutti e incrocia le informazioni sulle breaking changes.
3

Rivedi il playbook specifico della codebase

Devin legge per intero la guida all’aggiornamento a React 19, confronta ogni breaking change con la tua codebase tramite DeepWiki e produce un playbook articolato in fasi con file specifici, stime di complessità e passaggi di validazione:
# 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
Il playbook è un piano, non una migrazione già eseguita. Rivedilo con il tuo team, adatta fasi e ambito, quindi decidi come eseguirla.
4

Esegui e scala

Una volta che il playbook è pronto, salvalo e collegalo a una sessione per eseguirlo fase per fase:Scala su più repository — Se hai più applicazioni React che richiedono lo stesso aggiornamento, usa le sessioni batch di Advanced Devin per eseguire il playbook salvato su tutte in parallelo.