Seite 10 - React

Reacts useOptimistic-Hook löst einen einzelnen, lokalen Anwendungsfall elegant, scheitert aber an verschachtelten Listen, parallelen Mutationen und Race Conditions über mehrere Komponenten hinweg. Dieser Artikel zeigt, wie Optimistic Updates mit TanStack Query Mutations, Snapshot-basiertem Rollback und expliziter Query-Cancellation in echten Anwendungen robust werden.

Der React Warenkorb ist die Komponente, bei der Kunden am empfindlichsten auf Inkonsistenzen reagieren. Optimistische Updates lassen die UI sofort reagieren, während im Hintergrund die tatsächliche Synchronisation mit dem Magento Backend läuft, inklusive sauberer Konflikt-Auflösung und Multi-Tab-Abgleich.

Die Frage React Native gegen PWA lässt sich nicht pauschal beantworten, sondern hängt von konkreten Produktanforderungen ab: App-Store-Sichtbarkeit, Zugriff auf native Hardware, Offline-Verhalten und verfügbares Budget. Dieser Artikel liefert eine strukturierte Entscheidungsgrundlage mit echten technischen Grenzen statt Marketing-Versprechen.

Realistisches Code-Sharing zwischen React Web und React Native bedeutet nicht, dieselben Komponenten überall zu verwenden, sondern gezielt zu trennen, was plattformunabhängig ist, von dem, was es nicht sein kann. Business-Logik, Typen, API-Clients und Validierung lassen sich sauber teilen, Oberflächenkomponenten meist nicht. Dieser Artikel zeigt eine funktionierende Monorepo-Struktur mit echten Beispielen.

Meine App verhält sich im Development-Modus seltsam, im Production läuft sie einwandfrei" – dieser Satz ist ein Warnsignal, kein Entwarnung. React Strict Mode macht Bugs sichtbar, die in Production irgendwann auftreten werden. Das Doppelt-Ausführen ist kein Bug, sondern eine präzise Diagnosestrategie.

Redux Toolkit hat klassisches Redux mit seinen endlosen Switch Statements und Action Type Konstanten weitgehend abgelöst. Mit createSlice, RTK Query und Entity Adapter lässt sich globaler State in React Anwendungen mit deutlich weniger Code, dafür mit mehr Typsicherheit und eingebautem Server State Caching abbilden.

Ein Formular-Fehler, eine neue Toast-Nachricht oder ein aktualisierter Warenkorb-Zähler bleiben für Screenreader-Nutzer unsichtbar, solange React den DOM nur visuell aktualisiert. Eine ARIA Live Region schließt diese Lücke, indem sie Änderungen aktiv ankündigt, ohne den Tastaturfokus zu verschieben oder laufende Eingaben zu unterbrechen.

Lange Listen mit Nachladen beim Scrollen sind eine der häufigsten UI-Anforderungen, aber naive Implementierungen scheitern regelmäßig an Duplikaten, Speicherverbrauch und inkonsistenter Scroll-Position. TanStack Querys Infinite Query löst diese Probleme mit einer klaren Seiten-Struktur, cursorbasierter Navigation und lässt sich mit Virtualisierung kombinieren, um auch zehntausende Einträge flüssig darzustellen.

Create React App ist offiziell deprecated und wird nicht mehr gewartet. Vite hat den Standard für React-Tooling übernommen: natürliches ESM im Dev-Server, Sub-100ms Hot Module Replacement und eine Konfiguration, die ohne Eject auskommt. Dieser Artikel erklärt, warum der Wechsel sich lohnt und wie er reibungslos gelingt.

Routing in React war lange eine Quelle von Laufzeitfehlern: falsche URL-Parameter, untypisierte Search Params, fehlende Routen-Guards. TanStack Router löst das durch ein vollständig typsicheres Routing-System, bei dem der TypeScript-Compiler jeden Fehler in Navigation, Params und Search Params erkennt – bevor der Code den Browser erreicht.