Seite 7 - React

Tests, die Implementierungsdetails prüfen, brechen bei jedem Refactoring. React Testing Library erzwingt Tests aus Nutzerperspektive — mit getByRole statt getByTestId, userEvent statt fireEvent und MSW statt fetch-Mocks.

Suspense ist weit mehr als ein Spinner-Wrapper für React.lazy. In React 18 und 19 koordiniert es parallele Datenfetches, verhindert Layout-Shifts und macht Lade-Zustände deklarativ — ohne einen einzigen isLoading-Boolean.

Wer bei React 17 stehen geblieben ist, hat mehrere Major Versionen und tiefgreifende Aenderungen an Rendering, Root API und Concurrent Features vor sich. Das React 17 auf 19 Upgrade gelingt sicher nur mit einem Zwischenschritt ueber React 18 und einer strukturierten Checkliste, statt einem einzigen riskanten Sprung.

Environment Variablen in React Builds werden anders verarbeitet als in einem Backend: sie landen fest im Bundle, sobald sie das richtige Präfix tragen. Wer das nicht versteht, baut Secrets versehentlich in öffentlich einsehbaren JavaScript-Code ein oder wundert sich, warum eine geänderte Variable nach dem Deployment nicht greift.

Die Wahl der Datenschicht entscheidet über Type-Safety, Caching-Verhalten und die Geschwindigkeit, mit der ein React-Team neue Features ausliefert. REST bleibt der pragmatische Standard, GraphQL bringt flexible Queries für komplexe Datenmodelle, und tRPC liefert End-to-End-Typsicherheit ohne Schema-Sprache, sofern Backend und Frontend im selben TypeScript-Monorepo liegen.

Filter, Sortierung, Pagination und aktive Tabs landen in vielen React Anwendungen in useState, obwohl sie eigentlich Teil der Adresse sind. Wer diesen Zustand stattdessen in der URL speichert, bekommt Deep Linking, funktionierenden Browser Zurück Button und teilbare Links geschenkt, ganz ohne zusätzlichen Store.

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.

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.