Revision 710: React- & TypeScript-Glücksrad, mit Hans-Christian Otto

What this episode covers

Wir spielen wieder Glücksrad und lassen uns durch eine bunte Mischung aus React- und TypeScript-Themen treiben. Mit dabei sind diesmal Stefan, Peter und Hans-Christian Otto und wie schon beim letzten Mal zeigt sich schnell: Ein einzelnes Thema reicht locker für eine halbe Stunde Diskussion. Wir hangeln uns vom React-Compiler über TypeScript Assertion Signatures bis hin zu useState und verlieren uns dabei genüsslich in Details, Meinungen und Abschweifungen zu Compilern, CDNs und Programmierparadigmen. SHOWNOTES [00:02:13] REACT COMPILER Der React Compiler wird als neue Möglichkeit diskutiert, Performance-Optimierungen automatisch durch statische Analyse vorzunehmen. Statt manuell useMemo, useCallback oder React.memo einzusetzen, soll der Compiler diese Optimierungen eigenständig einfügen. Dabei steht weniger die tatsächliche Performance im Vordergrund als vielmehr die Reduktion von Boilerplate und die Verbesserung der Lesbarkeit von Komponenten. Gleichzeitig wird kritisch hinterfragt, wie sinnvoll diese automatischen Optimierungen sind, da Memoization selbst Kosten verursacht und in vielen Fällen kaum messbare Vorteile bringt. Zudem kann der Compiler problematisch werden, wenn Code nicht den üblichen React-Konventionen folgt und dadurch unerwartete Bugs entstehen. Ein weiterer Diskussionspunkt ist die grundsätzliche Rolle von Compile-Schritten im JavaScript-Ökosystem. Während Compiler-Optimierungen etabliert sind, wird auch kritisiert, dass Bundling und ähnliche Techniken moderne Browserfähigkeiten wie deduplizierte Ressourcen oder modulare Nutzung aushebeln können. In diesem Zusammenhang wird auch nostalgisch auf frühere CDN-Modelle geblickt, bei denen Bibliotheken zentral geladen wurden, mit allen Vor- und Nachteilen bezüglich Performance, Sicherheit und Kontrolle. [00:29:36] TYPESCRIPT ASSERTION SIGNATURES Assertion Signatures sind ein TypeScript-Feature, mit dem sich der Typ eines Wertes nach einem Funktionsaufruf verändern lässt, ohne dass die Funktion selbst einen Rückgabewert liefern muss. Ähnlich wie bei Type Predicates wird dem TypeScript-Compiler signalisiert, dass ein Wert nach erfolgreichem Durchlauf einer Funktion einen engeren Typ besitzt. Typische Anwendungsfälle sind Assertions wie in Testframeworks oder Validierungsfunktionen, bei denen im Fehlerfall eine Exception geworfen wird. Nach erfolgreichem Durchlauf kann der Code davon ausgehen, dass bestimmte Bedingungen erfüllt sind. Die Diskussion zeigt aber auch Schwächen in der TypeScript-Dokumentation auf: Manche Features sind schwer auffindbar oder nur in Release Notes dokumentiert. Zudem wird darauf hingewiesen, dass Keywords wie is oder asserts besondere Aufmerksamkeit erfordern, da sie direkten Einfluss auf das Typsystem nehmen. Neben der eigentlichen Funktionalität wird auch über die Komplexität des TypeScript-Ökosystems gesprochen, etwa beim Schreiben eigener Parser oder beim Umgang mit nicht vollständig dokumentierten Sprachfeatures. [00:51:01] REACT USESTATE useState wird als grundlegender Mechanismus beschrieben, um Zustand in funktionalen React-Komponenten zu speichern. Da Komponenten bei jedem Render neu ausgeführt werden, ermöglicht useState das Persistieren von Werten zwischen Renderings. Die Diskussion zeigt jedoch deutliche Kritik an der API: Die Syntax wird als umständlich empfunden, insbesondere bei komplexeren Zuständen oder wenn Werte voneinander abhängen. Auch typische Fehlerquellen wie asynchrone Updates oder falsche Nutzung beim Ableiten neuer Zustände werden thematisiert. Ein wiederkehrendes Problem ist, dass viele Entwickler useState verwenden, um Werte zu speichern, die eigentlich nur aus anderen Zuständen berechnet werden sollten. Das führt zu unnötigen Re-Renders und erhöht die Komplexität. Darüber hinaus wird useState im Kontext von Programmierparadigmen diskutiert. Während React stark funktional geprägt ist, kommen viele Entwickler aus objektorientierten Hintergründen und erwarten andere Modelle, etwa Klassen mit Properties. Diese Diskrepanz führt häufig zu Missverständnissen und erschwert den Einstieg. Gleichzeitig wird anerkannt, dass React durch seine Architektur Vorteile für zukünftige Konzepte wie paralleles Rendering bietet, auch wenn diese in der Praxis bisher selten eine Rolle spielen. LINKS REACT COMPILER Offizielle Einführung in den React Compiler und seine Ziele zur automatischen Optimierung. TYPESCRIPT 3.7 RELEASE NOTES Release Notes, in denen Assertion Signatures ursprünglich eingeführt wurden. USESTATE Dokumentation zum React Hook für lokalen Zustand in funktionalen Komponenten.