Seite 6 - React

Next.js Middleware läuft, bevor eine Route überhaupt gerendert wird, und entscheidet über Redirects, Rewrites und Header, noch bevor Server Components oder Client Components aktiv werden. Wer Matcher-Regeln, Auth-Checks und die Grenzen der Edge Runtime versteht, baut Routing-Logik, die schnell bleibt und trotzdem robust funktioniert.

React Hook Form wirbt damit, unnötige Re-Renders zu vermeiden, indem es Eingabefelder unkontrolliert über Refs verwaltet statt über State. Genau dieser Vorteil verschwindet aber schnell wieder, sobald watch() ins Spiel kommt, denn der zurückgegebene Wert dieser Funktion löst bei jeder Eingabe einen Re-Render der gesamten Formular-Komponente aus, während der dafür vorgesehene useWatch()-Hook genau dieses Problem gezielt löst.

Eine React-App, die beim ersten Netzwerkausfall weißen Screen zeigt, ist keine Progressive Web App – sie ist eine Website mit Icon. Echter Offline-First-Betrieb erfordert durchdachte Caching-Strategien, Background Sync und einen Service Worker, der weiß, was er cachen darf und was nicht.

Bevor du den Profiler-Tab öffnest und eine Aufzeichnung startest, lassen sich unnötige Re-Renders oft schon mit einem einzigen Klick sichtbar machen. Die React-DevTools-Option Highlight updates when components render färbt jede Komponente ein, sobald ihre Render-Funktion läuft, live im Browser während du klickst, tippst und navigierst.

Skeleton Screens und Spinner loesen dasselbe technische Problem, die Lue­cke zwischen einer Nutzeraktion und dem sichtbaren Ergebnis zu ueberbruecken, unterscheiden sich aber deutlich in ihrer Wirkung auf die wahrgenommene Wartezeit. Dieser Artikel vergleicht beide Ansaetze, zeigt, wann welcher besser passt, und geht durch die Umsetzung content-bewusster Skeletons als React-Suspense-Fallbacks.

Die Context API wirkt auf den ersten Blick einfach, produziert aber in der Praxis eine der häufigsten TypeScript-Fallen in React-Projekten: ein Context ohne echten Default-Wert liefert bei jedem useContext-Aufruf potenziell undefined zurück, und der Compiler zwingt danach an jeder Verwendungsstelle zu Null-Checks, die eigentlich unnötig wären. Dieser Artikel zeigt, wie man die Context API von Anfang an so typisiert, dass fehlende Provider bereits beim Testen auffallen statt erst beim Nutzer.

Sobald mehrere useState-Aufrufe zusammengehören und sich gegenseitig beeinflussen, wird der Code schnell unübersichtlich. useReducer bündelt zusammenhängende State-Übergänge in einer zentralen, testbaren Funktion.

Relay erzwingt über einen eigenen Compiler strenge Namenskonventionen, Fragment-Colocation und eine feste Connection-Spezifikation für Pagination. Apollo Client verzichtet auf diesen Zwang und bleibt dadurch flexibler, aber auch weniger vorhersehbar bei wachsender Teamgröße. Dieser Artikel zeigt, wann sich Relays Lernkurve tatsächlich auszahlt.

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.