Seite 5 - React

Create React App wird nicht mehr weiterentwickelt, aber ein bestehendes Projekt migriert sich nicht von selbst. Wer Create React App zu Vite migriert, muss Konfiguration, Umgebungsvariablen, Proxy Setup und Tests einzeln uebertragen, um am Ende einen schnelleren Dev Server ohne kaputte Builds zu bekommen.

Wer wartet, bis der Server antwortet, bevor die UI sich bewegt, verschenkt Wahrnehmungsgeschwindigkeit. useOptimistic löst dieses Problem direkt im React-Kern: Der UI-State springt sofort vor, wird bei Erfolg übernommen und bei Fehler sauber zurückgerollt – ohne manuelles State-Management.

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.

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.

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.

useCallback und useMemo sind die am häufigsten falsch eingesetzten Hooks in React. Sie kosten immer etwas – Speicher, Laufzeit für den Vergleich, kognitive Komplexität – und helfen nur in spezifischen, messbaren Situationen. Wer sie überall einsetzt, macht seine Applikation langsamer, nicht schneller.