Seite 9 - React

Wer Formulare in React 19 mit React Hook Form baut, kommt an einer Schema-Validierungsbibliothek kaum vorbei. Zod und Yup loesen dasselbe Problem mit unterschiedlichen Prioritaeten: TypeScript-first versus etablierte JavaScript-API. Dieser Artikel vergleicht beide entlang von Typinferenz, Syntax, verschachtelten Strukturen und Migrationsaufwand.

Bevor es Hooks gab, waren Render Props und Children-as-Function die Antwort auf Logik-Wiederverwendung zwischen Komponenten. Ein ehrlicher Blick darauf, wo sie im Hooks-Zeitalter noch echten Mehrwert bieten und wo Custom Hooks klar überlegen sind.

String-Konkatenation für Tailwind-Klassen ist fehleranfällig, schwer lesbar und skaliert nicht zu einem echten Design-System. Die Kombination aus clsx, tailwind-merge und class-variance-authority (CVA) löst dieses Problem elegant: typsichere Varianten, konfliktsichere Klassen-Merge und eine einzige cn-Utility für die gesamte Codebase.

Formulare mit fünf Schritten, Checkout Prozesse mit Zahlungsstatus und Medienplayer mit Ladezuständen erzeugen schnell einen unübersichtlichen Wust an Booleans in useReducer. XState modelliert diese Logik als endlichen Automaten mit expliziten Zuständen und Übergängen, wodurch unmögliche Zustandskombinationen strukturell ausgeschlossen werden.

Die Entscheidung zwischen Framer Motion und CSS Transitions in React hat mehr mit dem Animations-Typ als mit persönlicher Präferenz zu tun. Hover-Effekte und einfache State-Transitions gehören in CSS. Orchestrierte Sequences, Exit-Animations und Shared-Element-Transitions sind ohne Framer Motion kaum realisierbar. Dieses Tutorial erklärt wann welche Lösung die richtige ist.

Mit jedem neuen globalen Zustand, ob Theme, Authentifizierung oder Feature-Flags, waechst in vielen React-Anwendungen die Zahl der verschachtelten Context-Provider rund um die Wurzel der Anwendung. Dieser Artikel zeigt, wie sich diese tief verschachtelte Provider Hell durch ein komponierbares AppProviders-Pattern aufloesen laesst, inklusive Provider-Reihenfolge, Memoisierung, TypeScript-Typisierung und Testing.

JSDOM-basierte Tests lügen manchmal: Sie simulieren Browser-Verhalten, testen aber nicht, was der echte Browser mit einer Komponente macht. Playwright Component Testing rendert jede React-Komponente in einem echten Chromium, Firefox oder WebKit – ohne die gesamte Anwendung hochzufahren.

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.