React 18 → 19: Minimaler Kompatibilitäts-Refactor (React Native/Expo)

[ManAnRuck]

Beschreibung

Wir wollen die App auf React 19 heben – mit so wenig Änderungen wie möglich. Ziel ist reine Kompatibilität (keine neuen Features), sodass Builds, Tests und Releases wie gewohnt laufen. Da das Projekt auf React Native mit Expo Router basiert, umfasst die Migration auch die passenden React-Native/Expo-Versionen.

---

Hintergrund (warum & was ändert sich)

• React 19 ist stabil und bringt wenige, aber relevante Breaking Changes sowie Typ-Anpassungen (u. a. useRef-Signaturen, ref als Prop, Entfall einiger alter APIs).
• Für RN/Expo gilt: React 19 wird ab RN 0.78+ unterstützt; Expo SDK 53 enthält RN 0.79 inkl. React 19-Support.
• Empfohlen wird vorab ein Check mit React 18.3 (identisch zu 18.2, aber mit Warnungen für 19), um notwendige Anpassungen sichtbar zu machen.

Quellen

• React 19 Upgrade Guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
• React 19 Release: https://react.dev/blog/2024/12/05/react-19
• RN 0.78 mit React 19: https://reactnative.dev/blog/2025/02/19/react-native-0.78
• RN 0.80 (React 19.1): https://reactnative.dev/blog/2025/06/12/react-native-0.80
• Expo SDK 53 (RN 0.79, React 19): https://expo.dev/changelog/sdk-53

---

Scope (nur notwendige Änderungen)

• Upgrade der Minimal-Versionen:
  • react → ^19.x
  • (Bei Web nicht relevant, bei RN kein react-dom)
  • @types/react, ggf. @types/react-dom (falls im Web/Docs-Tooling genutzt) → ^19.x
  • React Native auf ≥ 0.78 (oder was Expo SDK liefert)
  • Expo SDK auf ≥ 53 (falls Managed Workflow)
• Typ-/Ref-Anpassungen gem. React 19 (TS):
  • useRef erfordert ein Argument (z. B. useRef<RefType | null>(null) oder useRef(undefined) statt leer).
  • Ref-Callback darf nichts (implizit) zurückgeben; ggf. Block-Body nutzen.
  • JSX-Transform sicherstellen (neuer Transform ist Pflicht; Expo/Metro ist i. d. R. korrekt konfiguriert).
• Entfernen ersatzloser Alt-APIs nur falls verwendet:
  • propTypes/defaultProps an Funktionskomponenten (in RN/TS meist entbehrlich).
• Tests:
  • Falls react-test-renderer genutzt → nur beibehalten, wenn weiterhin kompatibel; mittelfristig Empfehlung auf @testing-library/react-native, aber out of scope, solange nichts bricht.
• Keine Einführung neuer 19-Features (Actions, neue APIs etc.) – reine Kompatibilität.

---

Nicht im Scope

• Kein Refactoring auf neue Muster/Features von React 19 (Actions, neue Suspense-Patterns, DOM-APIs).
• Keine Architektur-Änderungen, kein State-Management-Tausch.

---

Akzeptanzkriterien

• Android & iOS bauen lokal und in CI (EAS/fastlane) ohne neue Errors/Warnings (soweit sinnvoll).
• E2E-/Lint/Typecheck laufen durch (Maestro, ESLint, TS).
• Keine Laufzeitfehler durch Ref/Type-Änderungen.
• Keine Breaking Changes durch Drittanbieter-Libs mit zu engen Peer-Deps (siehe Risiken).

---

Umsetzungsschritte

1. Vorbereitung (optional, aber empfohlen):

   • react → 18.3.x anheben und App starten, Warnungen sichten (macht nötige Änderungen für 19 sichtbar).

2. Platform-Update (nur wenn erforderlich):

   • Expo-Projekt: auf SDK ≥ 53 aktualisieren (folgt RN 0.79/React 19).
     Leitfaden: https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
   • Bare RN: RN ≥ 0.78 (oder aktueller) einführen.

3. React/Types bumpen:

   yarn add --exact react@^19 @types/react@^19
   # Nur falls irgendwo Web-Tooling:
   yarn add --exact -D @types/react-dom@^19

4. Codemods (nur was nötig ist):

   • React-19-Recipe:

     npx codemod@latest react/19/migration-recipe

     (enthält u. a. replace-string-ref, prop-types-typescript usw.)
   • Types-React-Codemods (TS-Anpassungen):

     npx types-react-codemod@latest preset-19 ./src

5. JSX-Transform prüfen

   • Expo/Metro-Preset i. d. R. ok. Bei Warnung dem Link im Log folgen.

6. Minimal-Fixes im Code:

   • useRef() → useRef(undefined) (falls ohne Argument genutzt).
   • Ref-Callbacks auf Block-Body umstellen (current => { instance = current; }).
   • Eventuelle propTypes/defaultProps an FKs entfernen/ersetzen (bei TS über Typen).

7. Build & Tests:

   yarn lint
   yarn lint:ts
   yarn test:e2e

   • Android/iOS Debug-Build starten, kritische Flows smoke-testen.
   • CI/EAS-Builds prüfen.

---

Risiken & Gegenmaßnahmen

• Peer-Deps mancher Libraries limitieren auf react <= 18.
  → Auf neuere Versionen aktualisieren oder kurzfristig mit Resolutions/Forks arbeiten.
• Strengere Metro/Exports (RN 0.79+) können Packages ohne exports brechen.
  → Abhängigkeiten auf aktuelle Versionen heben; ggf. Workarounds/patches.
• Interne React-APIs (verbotene Internals) in Drittlibs blockieren Upgrade.
  → Issue bei Maintainer öffnen; kurzfristig pinnen/patchen.

---

Testplan (kurz)

• Start App (Android/iOS), Navigation, Login/Onboarding (falls vorhanden), Voting-Flow, Detailseiten, Push/Deeplinks (sofern eingerichtet).
• Logs prüfen (keine neuen React-19-Warnungen/Errors).
• E2E-Smoke (Maestro) grün.

---

Checkliste

• Expo SDK ≥ 53 oder RN ≥ 0.78 installiert
• react (und ggf. Types) auf 19.x
• Codemods ausgeführt (nur nötige Änderungen übernommen)
• useRef/Ref-Callbacks angepasst
• Builds & Tests grün
• Changelog-Eintrag & kurze Migrationsnotiz im Repo

Referenzen (zur Doku)

• React 19 Upgrade Guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
• React 19 Release: https://react.dev/blog/2024/12/05/react-19
• RN 0.78 (React 19): https://reactnative.dev/blog/2025/02/19/react-native-0.78
• RN 0.80 (React 19.1): https://reactnative.dev/blog/2025/06/12/react-native-0.80
• Expo SDK 53 (RN 0.79/React 19): https://expo.dev/changelog/sdk-53