Seite 56 - Mironsoft Blog

Manuelles Memoizing mit useMemo und useCallback ist fehleranfällig, schwer wartbar und wird häufig falsch eingesetzt. Der React Compiler analysiert Komponentencode zur Build-Zeit und fügt automatisch die richtigen Memoizing-Wrapper ein – ohne dass Entwickler Dependencies-Arrays verwalten oder entscheiden müssen, wann etwas gecacht werden soll. Wie das funktioniert und was es bedeutet.

Daten in React zu laden bedeutete bislang immer: useEffect, useState, Lade-State, Error-State, Boilerplate. Der use()-Hook aus React 19 macht das deklarativ: Ein Promise rein, der aufgelöste Wert raus – Suspense übernimmt den Rest.

Eine schlecht designte Component API in einer geteilten Komponentenbibliothek ist Mehrarbeit für jedes Team-Mitglied, das sie nutzt. Props ohne Standardwerte, Emits ohne Typ-Contracts, fehlende Slots für Kompositionsstellen und undokumentiertes Expose-Interface machen Komponenten schwer nutzbar. Mit klaren Konventionen und TypeScript entstehen Component APIs, die stabil, erweiterbar und rückwärtskompatibel sind.

Das N+1-Problem ist das häufigste Performance-Antipattern in GraphQL-APIs. Es entsteht, wenn jeder Resolver eines Listen-Elements eine eigene Datenbankabfrage auslöst. Das Ergebnis: 100 Produkte bedeuten 101 Queries. Batching und DataLoader-Muster lösen das Problem systematisch — ohne die Flexibilität von GraphQL zu opfern.

Eine REST-API ohne korrekt dokumentierte Sicherheitsanforderungen ist für Konsumenten eine Blackbox. OpenAPI 3.x bietet vier Security-Scheme-Typen, die sich in der Swagger-UI direkt nutzbar machen lassen – wenn man weiß, wie man sie korrekt modelliert, global und endpoint-spezifisch kombiniert und mit Scopes granular steuert.

Copy-Paste zwischen Vue-Komponenten ist ein stilles Wartungsproblem: Wenn dieselbe Fetch-Logik, derselbe Validierungs-Code oder dasselbe Scroll-Verhalten in zehn Komponenten dupliziert ist, entsteht ein System, das bei jeder Bugfixierung zehnmal angefasst werden muss. Vue Composables lösen dieses Problem strukturell – durch Kapselung reaktiver Logik in useX-Funktionen, die sich wie Bausteine zusammensetzen lassen.

Ein nicht abgefangener Fehler in einer React-Komponente zerstört den gesamten Komponentenbaum und zeigt dem Benutzer einen leeren Bildschirm. Error Boundaries sind der Mechanismus, der JavaScript-Fehler im Rendering isoliert, Fallback-UIs zeigt und die Anwendung stabil hält – korrekt implementiert, zuverlässig und mit Monitoring-Integration.

shadcn/ui ist keine Bibliothek im klassischen Sinne — es ist ein Katalog von Copy-Paste-Komponenten auf Radix-UI-Basis. Wer das Copy-Paste-Modell versteht, kann darauf eine vollständig kontrollierbare, themeable Komponentenbibliothek für das eigene Design System aufbauen.