React-18-auf-19-Upgrade-Playbook erstellen

Möchten Sie das nicht manuell einrichten? Fügen Sie einen Link zu dieser Seite in eine Devin-Sitzung ein und bitten Sie Devin, alles für Sie einzurichten.

Verwende den Upgrade-Leitfaden für React 19 als Prompt für Devin

React 19 führt Breaking Changes bei der Behandlung von Refs, der Verwendung von Context, TypeScript-Typen und entfernten Legacy-APIs ein. Der offizielle Upgrade-Guide dokumentiert jede Änderung, aber die eigentliche Schwierigkeit ist, diese Änderungen auf deinen Code anzuwenden. Anstatt den Guide selbst zu lesen und jede Komponente zu prüfen, gib beides an Devin und erhalte ein Playbook, das auf deine tatsächlichen Dateien zugeschnitten ist.Öffne eine neue Devin-Sitzung über die Devin-Startseite und füge einen Prompt mit der URL des Upgrade-Guides und deinen Anforderungen ein:

Codebasisspezifischen Kontext hinzufügen

Devin verwendet DeepWiki, um die Architektur deines Repos automatisch zu verstehen. Es kann außerdem Online-Ressourcen zu React 19 abrufen – den offiziellen Upgrade-Guide, Blogposts, Changelogs von Bibliotheken – und die gefundenen Informationen direkt in das Playbook einarbeiten.Um das Playbook noch präziser zu machen, informiere Devin über Muster, die bei der Migration relevant sind:

“Wir verwenden forwardRef in 23 Komponenten unter src/components/ui/ — das sind die Basiskomponenten unseres Design-Systems”
“Wir haben noch 4 Klassenkomponenten in src/legacy/, die String-Refs und componentWillMount verwenden”
“Prüfe andere Repos in unserer Organisation (z. B. acme/design-system, acme/admin-dashboard), um zu sehen, ob sie bereits mit der React-19-Migration begonnen haben — übernimm alle Muster, die sie etabliert haben”

Wenn einige Abhängigkeiten eigene React-19-Kompatibilitätsguides haben (z. B. React Router, React Hook Form oder deine UI-Bibliothek), füge diese URLs ebenfalls in den Prompt ein — Devin liest sie alle und gleicht die entsprechenden Breaking Changes ab.

Überprüfen Sie das Playbook für diese Codebasis

Devin liest den React 19 Upgrade-Leitfaden von Anfang bis Ende, gleicht jede inkompatible Änderung über DeepWiki mit deiner Codebasis ab und erstellt ein stufenweises Playbook mit konkreten Dateien, Komplexitätsschätzungen und Validierungsschritten:

# 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

Das Playbook ist ein Plan, keine durchgeführte Migration. Stimmen Sie es mit Ihrem Team ab, passen Sie Phasen oder Umfang an und entscheiden Sie dann, wie Sie die Migration umsetzen.

Ausführen und Skalieren

Sobald das Playbook fertig ist, speichern Sie es und hängen Sie es an eine Session an, um es Phase für Phase auszuführen:Über Repositories hinweg skalieren — Wenn Sie mehrere React-Apps haben, die dasselbe Upgrade benötigen, bitten Sie Devin, das gespeicherte Playbook mithilfe von managed Devins parallel für alle auszuführen.

Devin Desktop

Agent Command Center

Releases

Windsurf Plugins

Accounts

Security