Tag: React

1. React Testing Library Best Practices 2026

   15.07.2025

   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.

   Read more

2. React Suspense: Lade-Zustände elegant managen

   08.07.2025

   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.

   Read more

3. React 17 auf 19 Upgrade: die vollstaendige Checkliste

   07.07.2025

   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.

   Read more

4. Environment Variablen in React Builds sicher verwalten

   05.07.2025

   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.

   Read more

5. REST vs. GraphQL vs. tRPC in React Apps: Datenschicht richtig wählen

   01.07.2025

   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.

   Read more

6. URL als State: Warum SearchParams oft besser sind als useState

   17.06.2025

   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.

   Read more

7. React Compiler: automatisches Memoizing erklärt

   16.06.2025

   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.

   Read more

8. React use()-Hook: Promises direkt in Komponenten auflösen

   15.06.2025

   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.

   Read more

9. React Error Boundaries: Fehler graceful abfangen

   13.06.2025

   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.

   Read more

10. shadcn/ui: Eigene Komponentenbibliothek aufbauen

    12.06.2025

    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.

    Read more