Seite 9 - React

Die falsche Wahl beim State Management kostet in React-Projekten mehr Performance und Wartbarkeit als fast jede andere Architekturentscheidung. Context, Zustand und Jotai lösen dasselbe Grundproblem auf grundlegend verschiedene Weisen – dieser Artikel erklärt die Unterschiede mit echten Codebeispielen und zeigt, wann welches Tool die richtige Wahl ist.

Apollo Client normalisiert GraphQL-Antworten automatisch in einen flachen Objektgraphen, aber ohne saubere Type Policies und ohne durchdachte Cache-Updates entstehen schnell veraltete Ansichten. Dieser Artikel zeigt, wie InMemoryCache wirklich funktioniert, wie eigene Cache-Schlüssel mit keyFields definiert werden und wie Mutations, Pagination und Debugging in der Praxis zusammenspielen.

Ein React Monorepo mit Turborepo bündelt mehrere Apps und geteilte Pakete in einem Repository, ohne dass jeder Build alles neu kompilieren muss. Dieser Artikel zeigt die Workspace-Struktur, die turbo.json-Konfiguration, Remote Caching und eine CI-Pipeline, die nur tatsächlich betroffene Pakete baut.

Symfony ist das robusteste PHP-Framework für komplexe Backend-Logik. React ist das mächtigste UI-Framework für dynamische Frontends. API Platform verbindet beides durch automatisch generierte REST- und GraphQL-APIs — mit Validierung, Serialisierung und OpenAPI-Dokumentation out of the box. Dieser Artikel zeigt, wie man die beiden Welten produktionsreif zusammenführt.

Einen rohen DOM-Node via Ref nach außen zu geben, ist eine Einladung zu unkontrolliertem externem Zugriff. useImperativeHandle definiert präzise, welche Methoden über den Ref verfügbar sind – eine kontrollierte API statt einer offenen DOM-Schnittstelle.

Barrierefreiheit in React-Komponenten scheitert oft an einem Detail: IDs für aria-labelledby und htmlFor müssen einmalig sein und auf Server und Client übereinstimmen. useId löst beides auf einmal – ohne Boilerplate und ohne Hydration-Fehler.

Slot basierte Komponenten APIs ersetzen das Root Element einer Komponente durch genau ein uebergebenes Kindelement, statt ein zusaetzliches DOM Element einzufuegen. Das asChild Muster von Radix hat diesen Ansatz populaer gemacht, doch die zugrunde liegende Slot Komponente laesst sich auch ohne fremde Bibliothek in wenigen Zeilen selbst bauen.

Headless UI Patterns trennen Interaktionslogik konsequent von der visuellen Darstellung, sodass Teams eigenes Design ohne Kompromisse bei Tastatursteuerung und ARIA-Semantik umsetzen koennen. Wer versteht, wie Custom Hooks, Compound Components und State Machines zusammenspielen, braucht fuer viele Anwendungsfaelle keine externe Headless-Bibliothek mehr.

Wer React nur an der Oberfläche kennt, weiß, dass der Virtual DOM „schnell macht". Wer React performant bauen will, muss verstehen, wie der Diffing-Algorithmus entscheidet, was aktualisiert wird – und warum Keys, Komponentenidentität und Fiber-Architektur dabei der entscheidende Faktor sind.

React Server Components sind kein neues Rendering-Modell – sie sind ein fundamentaler Paradigmenwechsel. Das Denken in Client-only-Komponenten funktioniert nicht mehr. Wer RSC wirklich versteht, baut Apps, die weniger JavaScript ausliefern, schneller laden und Datenbankzugriffe direkt in Komponenten kapseln können.