Seite 4 - React

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.

Nicht jedes Projekt braucht ein volles Meta-Framework. Mit renderToPipeableStream auf einem schlanken Express-Server laesst sich Streaming-HTML mit Suspense-Boundaries selbst aufbauen, samt der Stellen, an denen ein eigenes Setup an seine Grenzen stoesst.

Eine Error Boundary, die nach einem Fehler dauerhaft eine graue Wand zeigt, ist nur die halbe Loesung. Mit resetKeys, Retry Buttons und einem sauberen Reset Mechanismus wird aus dem Fallback ein echter Wiederherstellungspfad statt einer Sackgasse.

jest-axe bindet die Regel-Engine von axe-core direkt in Jest-Tests ein und prüft gerenderte React-Komponenten gegen anerkannte WCAG-Regeln. In der CI-Pipeline verhindert das, dass offensichtliche Barrierefreiheits-Verstöße unbemerkt in den Hauptzweig gelangen, ersetzt aber keine manuelle Prüfung.

Vier neue Array-Methoden liefern eine veraenderte Kopie statt das Original zu mutieren. Das macht sort(), reverse() und splice() in State-getriebenem Code endlich ueberfluessig.

Symfony mit Inertia.js zu kombinieren bedeutet, Controller weiterhin klassisch Twig-artig zu schreiben, nur dass am Ende statt HTML ein React-Komponentenname mit Props zurückgegeben wird, wodurch das gesamte Frontend wie eine Single-Page-Application wirkt, ohne dass irgendwo eine separate REST- oder GraphQL-API entsteht.

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.

Ein Ref auf eine selbst geschriebene Komponente funktioniert standardmäßig nicht, weil React Refs nicht automatisch durch Komponentengrenzen weiterreicht. forwardRef und useImperativeHandle lösen das gezielt, ohne die Kapselung der Komponente aufzugeben.