Tag: React

1. Create React App zu Vite migrieren: Schritt fuer Schritt

   13.10.2025

   Create React App wird nicht mehr weiterentwickelt, aber ein bestehendes Projekt migriert sich nicht von selbst. Wer Create React App zu Vite migriert, muss Konfiguration, Umgebungsvariablen, Proxy Setup und Tests einzeln uebertragen, um am Ende einen schnelleren Dev Server ohne kaputte Builds zu bekommen.

   Read more

2. useOptimistic: UI sofort aktualisieren, dann bestätigen

   12.10.2025

   Wer wartet, bis der Server antwortet, bevor die UI sich bewegt, verschenkt Wahrnehmungsgeschwindigkeit. useOptimistic löst dieses Problem direkt im React-Kern: Der UI-State springt sofort vor, wird bei Erfolg übernommen und bei Fehler sauber zurückgerollt – ohne manuelles State-Management.

   Read more

3. React Virtual List: 100.000 Zeilen ohne Lag

   11.10.2025

   Wer 10.000 React-Elemente ins DOM schreibt, baut eine Anwendung, die für Nutzer nicht bedienbar ist. Virtualisierung rendert nur die sichtbaren Zeilen — der Rest ist Mathematik. Wie man das mit TanStack Virtual, react-window und eigenen Implementierungen umsetzt.

   Read more

4. Screenreader-Tests für React-Apps: NVDA, VoiceOver, jest-axe

   09.10.2025

   Ein grüner jest-axe-Report bedeutet nicht, dass eine React-Anwendung mit NVDA oder VoiceOver tatsächlich bedienbar ist. Automatisierte Tools finden strukturelle ARIA-Fehler, aber keine verwirrende Ankündigungsreihenfolge oder unlogische Fokus-Sprünge. Dieser Guide zeigt, wie man Screenreader-Tests für React-Apps systematisch mit beiden Ebenen aufbaut.

   Read more

5. React 19 Hooks Cheatsheet: alle Hooks und wann nutzen

   09.10.2025

   React 19 bringt neue Hooks und verfeinert bestehende – doch das größte Problem in der Praxis ist nicht Unkenntnis, sondern falsche Wahl: useEffect wo useRef reicht, useMemo wo kein Memoizing nötig ist. Dieses Cheatsheet gibt klare Entscheidungsregeln, wann welcher React Hook der richtige ist.

   Read more

6. React Snapshot Testing: Fallstricke und bessere Alternativen

   08.10.2025

   Snapshot Testing verspricht, jede unbeabsichtigte Änderung an einer Komponente automatisch zu erkennen. In der Praxis werden riesige, unlesbare Snapshots aber oft blind per Tastendruck aktualisiert, statt echte Regressionen zu untersuchen. Dieser Artikel zeigt, wo Snapshot Testing wirklich hilft und wo gezielte Assertions und kleine Inline Snapshots deutlich mehr Sicherheit bringen.

   Read more

7. PWA Studio vs. eigenes React Frontend für Magento

   30.09.2025

   PWA Studio liefert eine fertige Peregrine-Architektur mit vorgefertigten Komponenten, während ein eigenes React Frontend volle Kontrolle über Design, Bundle-Größe und Abhängigkeiten bietet. Die Entscheidung hängt weniger von Trends ab als von Team-Größe, Zeitrahmen und der Individualität der geforderten Shop-Erlebnisse.

   Read more

8. React Design Pattern: Compound Components

   28.09.2025

   Prop-Drilling und monolithische Komponenten mit dutzenden Props sind ein sicheres Zeichen für eine Architektur, die nicht skaliert. Das Compound Components Pattern in React löst dieses Problem durch explizite Komposition: Sub-Komponenten teilen implizit State über Context, die API bleibt selbstdokumentierend und maximal flexibel.

   Read more

9. React Design Pattern: Custom Hook Extraction

   28.09.2025

   Komponenten, die gleichzeitig Datenfetching, Formularvalidierung und UI-State verwalten, sind schwer zu testen, schwer zu warten und schwer wiederzuverwenden. Custom Hook Extraction ist das fundamentale React-Pattern, das Logik von der Darstellung trennt – und damit beides besser macht.

   Read more

10. useCallback und useMemo: Die häufigsten Missverständnisse

    23.09.2025

    useCallback und useMemo sind die am häufigsten falsch eingesetzten Hooks in React. Sie kosten immer etwas – Speicher, Laufzeit für den Vergleich, kognitive Komplexität – und helfen nur in spezifischen, messbaren Situationen. Wer sie überall einsetzt, macht seine Applikation langsamer, nicht schneller.

    Read more