Seite 7 - React

Wer 10.000 React-Elemente ins DOM schreibt, baut eine Anwendung, die für Nutzer nicht bedienbar ist. Virtualisierung rendert nur die sichtbaren Zeilen — der Rest ist Mathematik. Wie man das mit TanStack Virtual, react-window und eigenen Implementierungen umsetzt.

Ein grüner jest-axe-Report bedeutet nicht, dass eine React-Anwendung mit NVDA oder VoiceOver tatsächlich bedienbar ist. Automatisierte Tools finden strukturelle ARIA-Fehler, aber keine verwirrende Ankündigungsreihenfolge oder unlogische Fokus-Sprünge. Dieser Guide zeigt, wie man Screenreader-Tests für React-Apps systematisch mit beiden Ebenen aufbaut.

@testing-library/user-event simuliert komplette Interaktionsabfolgen wie ein echter Browser, während fireEvent ein einzelnes DOM-Event synchron auslöst. Der Unterschied wirkt klein, entscheidet aber häufig darüber, ob ein Test reale Bugs findet oder blind daran vorbeiläuft.

React 19 bringt neue Hooks und verfeinert bestehende – doch das größte Problem in der Praxis ist nicht Unkenntnis, sondern falsche Wahl: useEffect wo useRef reicht, useMemo wo kein Memoizing nötig ist. Dieses Cheatsheet gibt klare Entscheidungsregeln, wann welcher React Hook der richtige ist.

Snapshot Testing verspricht, jede unbeabsichtigte Änderung an einer Komponente automatisch zu erkennen. In der Praxis werden riesige, unlesbare Snapshots aber oft blind per Tastendruck aktualisiert, statt echte Regressionen zu untersuchen. Dieser Artikel zeigt, wo Snapshot Testing wirklich hilft und wo gezielte Assertions und kleine Inline Snapshots deutlich mehr Sicherheit bringen.

PWA Studio liefert eine fertige Peregrine-Architektur mit vorgefertigten Komponenten, während ein eigenes React Frontend volle Kontrolle über Design, Bundle-Größe und Abhängigkeiten bietet. Die Entscheidung hängt weniger von Trends ab als von Team-Größe, Zeitrahmen und der Individualität der geforderten Shop-Erlebnisse.

Loading-Spinner, Fehlermeldung, Daten: Dieses Dreieck aus State tippt sich in jeder Komponente, die Daten von einer API lädt, fast identisch. Ein eigener Custom Hook bündelt dieses Muster an einer Stelle, bevor er automatisch zu jeder Komponente wandert, die ihn braucht, und zeigt gleichzeitig, wo der Eigenbau endet und eine Bibliothek wie TanStack Query beginnt.

Prop-Drilling und monolithische Komponenten mit dutzenden Props sind ein sicheres Zeichen für eine Architektur, die nicht skaliert. Das Compound Components Pattern in React löst dieses Problem durch explizite Komposition: Sub-Komponenten teilen implizit State über Context, die API bleibt selbstdokumentierend und maximal flexibel.

Komponenten, die gleichzeitig Datenfetching, Formularvalidierung und UI-State verwalten, sind schwer zu testen, schwer zu warten und schwer wiederzuverwenden. Custom Hook Extraction ist das fundamentale React-Pattern, das Logik von der Darstellung trennt – und damit beides besser macht.

Das React Error Boundary Interface arbeitet intern mit dem Typ unknown fuer gefangene Fehler, was Fallback Komponenten oft zwingt, auf any oder unsichere Casts auszuweichen. Mit generischen Typparametern und Discriminated Error Types lassen sich Error Boundaries bauen, die dem Aufrufer konkrete, typisierte Fehlerinformationen liefern.