Seite 12 - React

Ein Modal ohne Focus Trap lässt Tastaturnutzer im Hintergrund verschwinden, während der Dialog visuell im Vordergrund steht. Dieser Guide zeigt, wie man einen eigenen Focus Trap in React implementiert, ARIA-Attribute korrekt setzt und den Fokus nach dem Schließen zuverlässig zurückgibt, ganz ohne fertige Bibliothek.

Ein Like-Button, der erst nach dreihundert Millisekunden Netzwerklatenz reagiert, fühlt sich träge an, selbst wenn der Server technisch schnell antwortet. Optimistic UI Updates lösen dieses Wahrnehmungsproblem, indem GraphQL-Mutations das erwartete Ergebnis sofort im Interface anzeigen und erst im Fehlerfall sauber zurückrollen, statt den Nutzer für jede Interaktion warten zu lassen.

Ein React Checkout Flow entscheidet in wenigen Sekunden darüber, ob ein Kunde den Kauf abschließt oder abbricht. Klare Schritt-Struktur, sofortige Formular-Validierung und robuste Fehlerbehandlung bei Zahlungsanbietern machen den Unterschied zwischen einem Checkout, der konvertiert, und einem, der Umsatz verschenkt.

Der Profiler-Tab der React DevTools zeigt bei jedem Commit einen Flame Graph, aber die Faerbung allein sagt wenig aus. Wer Commit-Dauer, Ranked Chart und die Why-did-this-render Anzeige richtig kombiniert, findet echte Bottlenecks statt an Symptomen zu doktern.

Wenn Nutzer schnell zwischen Suchbegriffen, Filtern oder Tabs wechseln, feuert useEffect mehrere Requests hintereinander ab. Trifft die Antwort auf die alte Anfrage später ein als die Antwort auf die neue, landet veralteter Content im UI. AbortController löst dieses Problem strukturell statt es mit Flags zu kaschieren.

Internationalisierung in React wird oft unterschätzt, bis die erste Mehrsprachigkeit-Anforderung im Backlog landet. next-intl bietet für Next.js App Router eine vollständige i18n-Lösung: typsichere Übersetzungen, ICU-Pluralisierung, Datums- und Zahlenformatierung nach Locale, Sprachrouting und vollständiger Server-Component-Support ohne Client-Bundle-Overhead.

Die falsche Wahl beim State Management kostet in React-Projekten mehr Performance und Wartbarkeit als fast jede andere Architekturentscheidung. Context, Zustand und Jotai lösen dasselbe Grundproblem auf grundlegend verschiedene Weisen – dieser Artikel erklärt die Unterschiede mit echten Codebeispielen und zeigt, wann welches Tool die richtige Wahl ist.

React 19 hebt einen der aeltesten Sonderfaelle des Frameworks auf: ref laesst sich jetzt direkt als normale Prop entgegennehmen, ganz ohne forwardRef-Wrapper. Dieser Artikel zeigt das neue Muster, wie bestehende forwardRef-Komponenten migriert werden, die TypeScript-Typisierung und wie beide Muster in einer gemischten Codebasis sicher nebeneinander bestehen.

Ein POST-Request ist schnell abgeschickt, die eigentliche Arbeit beginnt danach: Cache aktualisieren, betroffene Queries invalidieren, bei einem Fehler sauber zuruecksetzen. useMutation bietet dafuer ein klares API-Muster statt verstreuter Handler-Logik.

Apollo Client normalisiert GraphQL-Antworten automatisch in einen flachen Objektgraphen, aber ohne saubere Type Policies und ohne durchdachte Cache-Updates entstehen schnell veraltete Ansichten. Dieser Artikel zeigt, wie InMemoryCache wirklich funktioniert, wie eigene Cache-Schlüssel mit keyFields definiert werden und wie Mutations, Pagination und Debugging in der Praxis zusammenspielen.