Skip to main content

Créer un playbook de mise à niveau de React 18 vers 19

Transformez le guide officiel de mise à niveau vers React 19 en un playbook par phases, adapté à votre base de code.
AuthorCognition
CategoryMigrations
FeaturesAvancé, Playbooks
1

Soumettez à Advanced Devin le guide de mise à niveau vers React 19

React 19 introduit des changements incompatibles concernant la gestion des refs, l’utilisation de Context, les types TypeScript et la suppression d’anciennes API. Le guide officiel de mise à niveau documente chaque changement, mais la partie difficile consiste à faire correspondre ces changements à votre code. Au lieu de lire vous-même le guide et d’auditer chaque composant, donnez les deux à Advanced Devin et obtenez un plan d’action adapté à vos fichiers réels.Ouvrez Advanced Devin en cliquant sur le bouton Advanced sous la zone de saisie sur la page d’accueil de Devin, puis collez un prompt avec l’URL du guide de mise à niveau et ce dont vous avez besoin :
2

Ajouter du contexte spécifique à la base de code

Advanced Devin utilise DeepWiki pour comprendre automatiquement l’architecture de votre repo. Il peut également consulter des sources en ligne à propos de React 19 — le guide de mise à niveau officiel, des articles de blog, des changelogs de bibliothèques — et intégrer directement ce qu’il trouve dans le playbook.Pour rendre le playbook encore plus précis, indiquez à Devin les schémas que la migration va toucher :
  • “Nous utilisons forwardRef dans 23 composants sous src/components/ui/ — ce sont les primitives de notre design system”
  • “Nous avons encore 4 composants à base de classes dans src/legacy/ qui utilisent des refs sous forme de chaînes de caractères et componentWillMount”
  • “Vérifie les autres dépôts de notre organisation (par ex. acme/design-system, acme/admin-dashboard) pour voir s’ils ont déjà commencé la migration vers React 19 — réutilise tous les schémas qu’ils ont établis”
Si certaines dépendances ont leurs propres guides de compatibilité React 19 (par ex. React Router, React Hook Form ou votre bibliothèque d’interface utilisateur), collez aussi ces URL dans le prompt — Devin les lit toutes et croise les changements majeurs (breaking changes).
3

Consultez le guide propre à la base de code

Devin lit de bout en bout le guide de mise à niveau vers React 19, recoupe chaque changement incompatible avec votre base de code via DeepWiki, et produit un playbook en plusieurs phases avec les fichiers concernés, des estimations de complexité et des étapes de validation :
# 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
Le playbook est un plan, pas une migration déjà effectuée. Passez-le en revue avec votre équipe, ajustez le découpage en phases ou le périmètre, puis décidez de la manière de l’exécuter.
4

Exécuter et passer à l’échelle

Une fois que le playbook vous convient, enregistrez-le et attachez-le à une session pour l’exécuter phase par phase :Passer à l’échelle sur plusieurs dépôts — Si vous avez plusieurs applications React qui ont besoin de la même mise à niveau, utilisez les sessions par lot d’Advanced Devin pour exécuter en parallèle le playbook enregistré sur chacune d’elles.