Seite 8 - React

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.

Ein neues Akzentblau im Design-Token-Set kann still einen bestehenden Button unlesbar machen, ohne dass es jemand vor dem Release bemerkt. Farbkontrast-Tooling für React-Design-Systeme automatisiert genau diese Prüfung: von der Token-Definition über Storybook bis zur CI-Pipeline, damit WCAG-Verstöße auffallen, bevor sie in Produktion landen.

Adresslisten, Rechnungspositionen oder Kontaktpersonen: Sobald ein Formular eine variable Anzahl gleichartiger Eintraege braucht, wird manueller Array-State schnell zur Performance-Bremse. useFieldArray aus React Hook Form loest genau dieses Problem gezielt statt pauschal.

Datentabellen in React scheitern auf zwei Arten: Entweder baut man alles von Hand und investiert Wochen in Sorting, Filtering und Pagination, oder man wählt eine High-Level-Bibliothek und kämpft gegen ihren Lock-in. TanStack Table v8 ist der dritte Weg: ein headless Tabellen-Engine, der alle Logik liefert und das UI vollständig in eurer Hand lässt.

Wer React-Props ohne klare Typen schreibt, verlässt sich auf Konventionen statt auf den Compiler. TypeScript macht aus stillschweigenden Annahmen über Props explizite Verträge: Welche Werte sind Pflicht, welche optional, welche Form dürfen Children annehmen und welche zusätzlichen HTML-Attribute soll eine Komponente durchreichen. Dieser Artikel zeigt, wie man React-Props von der ersten Interface-Definition bis zu erweiterten, wiederverwendbaren Komponenten sauber typisiert.

Der App Router ist nicht nur ein neues Verzeichnis – er ändert das mentale Modell von Next.js fundamental. Layouts, Server Components, verschachtelte Routen und das neue Data-Fetching-Paradigma erfordern einen durchdachten Migrationsplan, der Produktionsausfälle vermeidet und das Team nicht überfordert.

Polling ist keine Echtzeit-Architektur – es ist ein Kompromiss, der unter Last zusammenbricht. WebSocket und Mercure bieten echte Push-Kommunikation, aber ihre Integration in React erfordert durchdachte Custom Hooks, robuste Reconnect-Logik und sicheres State-Management für Echtzeit-Datenströme.

Validierungsfehler pro Feld zurueckgeben, Pending-Zustand mitfuehren und trotzdem deklarativ bleiben: useActionState buendelt das Ergebnis einer Server Action in einem einzigen, vorhersagbaren State statt in verstreuten useState-Aufrufen.

Externe Datenquellen in React zu integrieren, war vor React 18 ein Minenfeld aus Race Conditions und inkonsistenten Renders. useSyncExternalStore ist die offizielle Lösung: ein Hook, der externe Stores korrekt mit dem React-Rendering-Zyklus verbindet und Tearing auch im Concurrent Mode verhindert.

Ein Custom Hook wird zu oft nur indirekt über die Komponente getestet, die ihn verwendet. Das verdeckt Bugs in der Hook-Logik und macht Tests unnötig komplex. renderHook aus der React Testing Library erlaubt es, Zustand, Nebenwirkungen und asynchrone Updates eines Hooks direkt zu prüfen, ganz ohne künstliche Host-Komponente.