Seite 3 - React

Ein bestehendes JavaScript Projekt komplett auf TypeScript umzustellen, klingt nach Wochen Stillstand. Wer TypeScript schrittweise einfuehrt, aktiviert allowJs, migriert Datei fuer Datei und erreicht am Ende strict Mode, ohne den Feature Betrieb jemals zu unterbrechen.

Eine barrierefreie Komponenten Bibliothek entsteht nicht durch nachtraegliches ARIA Anflicken, sondern durch Fokus Management, Tastatursteuerung und semantische Struktur, die von der ersten Zeile an mitgedacht werden. Wer die Grundmuster hinter Roving Tabindex, Live Regions und Fokus Trap versteht, kann Komponenten bauen, die WCAG erfuellen, ohne staendig eine externe Bibliothek zu Rate ziehen zu muessen.

React.memo, useMemo und useCallback sind die meistmissverstandenen Performance-Tools in React. Sie werden entweder überall eingesetzt – mit der Hoffnung, alles schneller zu machen – oder gar nicht. Beides ist falsch. Memoization hat Kosten: Vergleichsoperationen, Speicher für gecachte Werte und erhöhte Codekomplexität. Nur dort einsetzen, wo gemessene Re-Render-Probleme vorliegen.

Ein Dropdown-Menü, das nur mit der Maus bedienbar ist, oder eine Tab-Leiste, die bei jedem Tab-Druck durch zehn einzelne Reiter springt, verstößt gegen etablierte WAI-ARIA-Erwartungen. Tastaturnavigation in React folgt festen Mustern wie Roving Tabindex und Pfeiltasten-Handling, die sich in jeder komplexen Komponente wiederverwenden lassen.

React Fiber ist nicht nur ein internes Implementierungsdetail – es ist die Grundlage dafür, warum React 18 mit Concurrent Mode, useTransition und Suspense Anwendungen fundamental anders rendert als alle Versionen davor. Wer verstehen will, warum manche Updates dringlicher sind als andere und wie React entscheidet, was als nächstes auf den Bildschirm kommt, muss Fiber und sein Prioritätensystem kennen.

Debounce mit setTimeout ist eine pragmatische Krücke, keine Lösung. useDeferredValue aus React 18 verschiebt teure Render-Arbeit ohne feste Zeitfenster – der Browser bleibt reaktionsfähig, während die Ergebnisliste im Hintergrund aktualisiert wird.

Ruckelnde Listen, verzögerte Touch-Reaktionen und träge Animationen haben in React Native fast immer dieselbe Ursache: zu viel asynchrone Kommunikation zwischen JavaScript und der nativen Seite. Die neue Architektur mit JSI und Fabric hat viele dieser Engpässe strukturell beseitigt, doch Performance bleibt eine Frage der richtigen Techniken im eigenen Code.

Expo hat sich von einer eingeschränkten Sandbox zu einer vollwertigen Toolchain für React Native entwickelt, die auch komplexe native Module unterstützt. Der Bare Workflow bleibt trotzdem relevant, wenn maximale native Kontrolle gefragt ist. Dieser Artikel zeigt, wie Expo heute wirklich arbeitet und wann der Umstieg auf Bare tatsächlich nötig wird.

Manuell verwalteter Server State in React führt immer zu denselben Problemen: doppelte Requests, veraltete Daten, inkonsistente Ladezustände und Boilerplate, der sich über hunderte Komponenten verteilt. TanStack Query v5 löst das durch ein deklaratives Caching- und Synchronisationssystem, das Serverantworten zu einem reaktiven, automatisch synchronisierten Teil des UI-State macht.

Code Splitting ist keine einmalige Maßnahme, sondern eine kontinuierliche Strategie. React.lazy und dynamische Imports laden JavaScript nur dann, wenn es wirklich gebraucht wird – aber nur, wenn die Split-Grenzen an den richtigen Stellen gezogen werden. Zu viele kleine Chunks verlangsamen das Laden durch HTTP-Overhead. Zu wenige verhindern jeglichen Nutzen. Dieses Tutorial zeigt, wie man die Balance findet.