React: Anleitungen und Praxiswissen | mironsoft Blog
React
-
08.05.2026
TypeScript mit React auf das richtige Level zu bringen bedeutet mehr als Props mit Interfaces tippen. Der satisfies-Operator, Template Literal Types, Generics in Komponenten und discriminated unions ermöglichen Props-APIs, die zur Laufzeit unmöglich falsch verwendet werden können — weil TypeScript alle Fehler schon beim Schreiben markiert.
-
04.05.2026
Eine Seiten-Query, die alle Felder für zehn Komponenten in einem Block auflistet, wird bei jeder Änderung zum Merge-Konflikt-Magneten. GraphQL Fragments zerlegen Queries in benannte, wiederverwendbare Bausteine, die direkt neben der Komponente leben, die sie konsumiert, und lösen damit Wartbarkeitsprobleme, die mit wachsender Anwendung unvermeidlich werden.
-
03.05.2026
Die next/image Komponente generiert automatisch responsive Bildvarianten, moderne Formate und Lazy Loading, löst aber nicht jedes Performanceproblem von selbst. Wer sizes korrekt konfiguriert, Priority gezielt für das Largest-Contentful-Paint-Element setzt und Remote Patterns sauber pflegt, holt aus der Next.js Image Optimierung tatsächlich das volle Potenzial heraus.
-
01.05.2026
Next.js cacht auf vier Ebenen gleichzeitig – und viele Entwickler wissen nicht, welcher Cache warum anschlägt. Request Memoization, Data Cache, Full Route Cache und Router Cache interagieren miteinander und führen zu verwirrenden Ergebnissen, wenn man ihre Regeln nicht kennt.
-
30.04.2026
Ein Theming System mit CSS Variablen legt Design Tokens als native Custom Properties im Browser ab, statt sie bei jedem Render ueber JavaScript neu zu berechnen. Das Ergebnis ist ein Theme Wechsel ohne Re Render der Komponenten, geringere Bundle Groesse und ein Ansatz, der unabhaengig von der gewaehlten CSS Strategie funktioniert.
-
30.04.2026
Polymorphe Komponenten lassen den Aufrufer entscheiden, welches HTML Element tatsaechlich gerendert wird, ohne dass die Komponente selbst dafuer eine eigene Variante braucht. Mit dem as Prop und ElementType aus TypeScript bleibt diese Flexibilitaet vollstaendig typsicher, inklusive korrekt vererbter Props und funktionierendem Ref Forwarding.
-
29.04.2026
Ein CSS-Refactoring kann eine Komponente funktional unverändert lassen und trotzdem das Layout unbemerkt zerschießen. Unit- und Component-Tests prüfen Verhalten, nicht Aussehen. Visual Regression Testing schließt genau diese Lücke, indem Screenshots gegen eine Referenz verglichen werden und jede Pixel-Abweichung sichtbar wird, bevor sie in Produktion landet.
-
19.04.2026
Eigene UI-Komponenten ohne WAI-ARIA richtig zu implementieren, kostet Wochen. Dialog, Dropdown, Tooltip und Select korrekt mit Keyboard-Navigation, Fokus-Trapping und Screenreader-Unterstützung zu bauen ist komplexer als die meisten Entwickler ahnen. Radix UI löst genau dieses Problem.
-
18.04.2026
Wer eine gewachsene React Codebasis von Klassenkomponenten auf Hooks umstellt, braucht mehr als eine Suchen und Ersetzen Aktion. Reihenfolge, Lifecycle Fallstricke, this.setState Batching und Tests entscheiden darueber, ob die Migration reibungslos verlaeuft oder produktive Bugs erzeugt.
-
14.04.2026
Nicht jede zusaetzliche npm-Abhaengigkeit ist noetig, um herauszufinden, warum eine Komponente zu oft neu rendert. Die Highlight-Updates-Option der React DevTools und ein zehn Zeilen langer eigener Hook reichen fuer die meisten Faelle bereits aus.