Die Bibliotheken hinter modernen React-Apps

Eine moderne React-App besteht im Wesentlichen aus React selbst und einem kleinen, überschaubaren Set an Bibliotheken: eine für Server-State-Datenabruf, eine für Client-State, eine für Routing, eine für Styling, eine für UI-Primitive und eine für Formulare. React selbst — aktuell die Version 19.2 — übernimmt Komponenten, Hooks und Rendering. Alles andere ist eine Entscheidung, und die ständige Fluktuation im Ökosystem lässt diese Entscheidungen schwieriger erscheinen, als sie tatsächlich sind. Die Realität ist: Für jede Aufgabe gibt es mittlerweile einen klaren Standard und ein oder zwei situative Alternativen.

Dieser Artikel ordnet den Stack nach dem jeweiligen Einsatzzweck: Foundation, State, Datenabruf, Routing, Styling, UI, Formulare und Animation. Für jede Kategorie erhalten Sie den Standard für 2026, wann eine Alternative sinnvoll ist und wie die Wahl mit zwei Kräften interagiert, die das Ökosystem neu gestalten — React Server Components (RSC) und der React Compiler.

React-Projektgrundlagen: Die Wahl des Frameworks

Vor jeder Bibliotheksentscheidung wählen Sie die Grundlage, auf der Ihre App aufbaut — und im Jahr 2026 wird diese Entscheidung maßgeblich davon beeinflusst, ob Sie React Server Components nutzen möchten. Der Einsatzzweck hier ist Projekt-Scaffolding, Build-Tooling, Routing und Rendering-Strategie, gebündelt in einem einzigen Ausgangspunkt.

Für die meisten neuen Apps ist Next.js der Standard: Es ist das vollständigste Full-Stack-React-Framework mit stabilem RSC, Server Actions und dateibasiertem Routing. Wählen Sie Vite, wenn Sie eine clientseitig gerenderte Single-Page-App entwickeln und einen schnellen, meinungsfreien Build ohne vollständiges Framework wünschen — Sie stellen Routing und Datenabruf selbst zusammen. Wählen Sie Astro, wenn das Projekt inhaltsorientiert ist — Marketing-Seiten, Dokumentation, Blogs — und Sie hauptsächlich statisches HTML mit React-Inseln nur dort ausliefern möchten, wo Interaktivität benötigt wird. Wählen Sie TanStack Start, wenn typsicheres Routing und Server-Funktionen Priorität haben und Sie eine frühe Adoption in Kauf nehmen können: Es befindet sich als v1 Release Candidate kurz vor der stabilen Version, wobei RSC-Unterstützung noch in Entwicklung ist.

Die zwei Kräfte, die bei all diesen Optionen abzuwägen sind, sind React Server Components, die den Datenabruf auf den Server verlagern, und der React Compiler, der Ihre Komponenten unabhängig von der gewählten Grundlage automatisch memoiert.

Was der React Compiler an Ihren Bibliotheksentscheidungen ändert

Der React Compiler ist nun stabil und verändert, welche Optimierungen Sie manuell vornehmen müssen. React Compiler 1.0 wurde am 7. Oktober 2025 veröffentlicht, auf der React Conf angekündigt, und memoiert Komponenten und Hook-Werte automatisch zur Build-Zeit, wodurch die meisten manuellen useMemo- und useCallback-Aufrufe entfallen. Für die Bibliotheksauswahl ist das relevant, weil eine Klasse von Boilerplate, die früher Integrationscode überfrachtet hat — das Wrappen von Selektoren, das Memoieren von Callbacks, die an Formularfelder übergeben werden, das Stabilisieren abgeleiteter Werte — nun vom Compiler übernommen wird.

Die praktische Auswirkung auf die Bibliothekswahl: Diese automatische Memoierung schwächt das Performance-Argument für atomare State-Bibliotheken und eliminiert eine Kategorie von Boilerplate aus Formularintegrationen. Dadurch wählen Sie Bibliotheken nach ihrem Datenmodell und ihrer Ergonomie, nicht danach, wie viel manuelle Feinabstimmung sie erfordern, um Re-Render-Kaskaden zu vermeiden. Der Compiler wird laut den React Compiler Installationsdocs für Vite, Next.js und Expo unterstützt.

React State-Management-Bibliotheken: Die Vier-Kategorien-Taxonomie

Moderne React-Apps haben vier verschiedene State-Kategorien — Server State, verwaltet von TanStack Query, Client-UI-State, gehandhabt durch useState oder Zustand, URL-State, verwaltet durch nuqs, und globaler App-State in Zustand — und die Wahl des falschen Werkzeugs für die jeweilige Kategorie ist die häufigste Ursache unnötiger Komplexität. Die meisten Schmerzen mit „State-Management ist schwierig” entstehen dadurch, dass Server-Daten in einem Client-Store abgelegt werden oder gemeinsam genutzter UI-State, der in die URL gehört, als globaler State modelliert wird.

Zwischen TanStack Query für Server State, eingebauten Hooks für lokalen State und der URL für gemeinsamen UI-State ist der Bedarf an einem dedizierten globalen Store geschrumpft. Wenn Sie dennoch einen benötigen, ist Zustand der Standard — ein minimaler create()-Store mit Selektor-Subscriptions und ohne Provider:

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
}))

Wählen Sie Redux Toolkit, wenn Sie eine bestehende Redux-Codebasis pflegen oder erweitern und dessen DevTools-Zeitreise und strukturiertes Action-Tracking nutzen möchten. Wählen Sie Jotai, wenn Sie wirklich feingranulare atomare Subscriptions benötigen — obwohl das Re-Render-Argument für das atomare Modell durch die automatische Memoierung des React Compilers schwächer geworden ist. Für URL-State gibt Ihnen nuqs typisierte Search-Parameter, sodass Filter und Paginierung einen Refresh überstehen und sauber per Link geteilt werden können.

Server State und der staleTime-Standard

TanStack Querys staleTime ist standardmäßig auf 0 gesetzt, was bedeutet, dass jedes Einhängen einer Komponente Daten als veraltet markiert und einen Hintergrund-Refetch auslöst; für stabile Daten wie Navigationsmenüs oder Benutzerprofile ist das Setzen von staleTime auf einen Wert ungleich null die einzelne wirkungsvollste Konfigurationsänderung, die die meisten Apps nie vornehmen. Die Dokumentation zu wichtigen Standardwerten erläutert dies:

import { useQuery } from '@tanstack/react-query'

// staleTime defaults to 0 → refetches on every mount.
// Set a non-zero value for data that doesn't change per-view.
const { data } = useQuery({
  queryKey: ['profile'],
  queryFn: fetchProfile,
  staleTime: 5 * 60 * 1000, // 5 minutes
})

Ein häufiges Produktionsproblem besteht darin, diesen Standard beizubehalten: Session-Replays von datenintensiven Apps zeigen regelmäßig Kaskaden von Hintergrund-Refetches, die bei jedem Routenwechsel ausgelöst werden — ein Muster, das sich schwer auf eine einzelne Konfigurationszeile zurückführen lässt, bis man die Netzwerksequenz gegen eine echte Benutzersitzung abspielt.

React-Bibliotheken für Datenabruf und Routing

Für den Datenabruf hängt der Standard davon ab, wo Sie abrufen. Für clientseitigen Abruf — REST- oder GraphQL-Caching, optimistische Updates, Hintergrundsynchronisierung — ist TanStack Query der Standard; in einem RSC-Framework wie Next.js 16 rufen Sie Daten auf dem Server innerhalb von Server Components ab und übergeben sie als Props, wodurch eine clientseitige Abrufbibliothek vollständig entfällt. Wählen Sie Apollo Client, wenn Sie GraphQL-first arbeiten und normalisierten Cache benötigen; wählen Sie tRPC, wenn Sie Client und Server in TypeScript kontrollieren und Ende-zu-Ende-Typinferenz ohne eine Schema-Schicht wünschen.

Routing folgt derselben Server/Client-Aufteilung. Wenn Sie ein Meta-Framework verwenden, übernimmt es das Routing. Außerhalb davon ist React Router die meistgenutzte Bibliothek; sie bietet sowohl einen klassischen clientseitigen Bibliotheksmodus als auch einen vollständigen Framework-Modus mit Loadern, Actions und Server-Rendering. Wählen Sie TanStack Router, wenn typsichere Routeninferenz Priorität hat — es ist stabil in v1 mit erstklassiger TypeScript-Inferenz für Parameter und Search.

TanStack Start — das typsicheres dateibasiertes Routing, Server-Funktionen und SSR bietet — nähert sich als v1 Release Candidate der Stabilität; laut der TanStack Start-Dokumentation ist RSC-Unterstützung noch in Entwicklung, was Next.js 16 zur vollständigeren Full-Stack-Wahl für Teams macht, die RSC heute benötigen. Beobachten Sie es als vielversprechenden Newcomer, nicht als aktuellen Standard.

React-Styling-Bibliotheken und RSC-Kompatibilität

RSC-Kompatibilität ist nun ein erstrangiges Filterkriterium für Styling-Entscheidungen. Runtime-CSS-in-JS-Bibliotheken wie styled-components und Emotion führen Style-Injection im Browser aus, was mit dem React Server Components-Modell des serverseitigen Renderings kollidiert — daher sind in einer Next.js-16-App mit RSC Tailwind CSS v4 oder CSS Modules die kompatiblen Standards, nicht Runtime-CSS-in-JS.

Tailwind CSS ist der Utility-First-Standard. Die v4-Linie verlagerte die Konfiguration per @theme-Direktive in CSS und liefert eine schnellere Engine, wie die Tailwind-v4-Ankündigung beschreibt. Ein einzelner className übernimmt das Styling:

<h1 className="text-blue-700">{title}</h1>

Wählen Sie CSS Modules, wenn Sie koloziiertes, gekapseltes CSS ohne Utility-Class-Vokabular wünschen — sie haben keine Seiteneffekte und funktionieren sauber in RSC. Wählen Sie eine Build-Time-CSS-in-JS-Option wie vanilla-extract, wenn Sie typsichere Styles in TypeScript ohne Runtime-Kosten verfassen möchten.

styled-components befindet sich seit März 2025 im Maintenance-Modus und wird für neue Projekte nicht empfohlen, ist aber kein aufgegebenes Projekt — es funktioniert weiterhin in RSC hinter einer 'use client'-Grenze und hat in Version v6.4 RSC-kompatibles CSS-Variable-Theming via createTheme eingeführt.

Der übergeordnete Punkt bleibt bestehen: Runtime-Style-Injection steht dem Server-Render-Modell entgegen, daher sind Utility-First- oder Build-Time-Ansätze die sicherere Wahl für neue RSC-Apps.

React-UI-Bibliotheken: Abhängigkeitsmodell vs. Eigentumsmodell

Die wichtigste Entscheidung auf der UI-Ebene ist architektonischer Natur: eine versionierte Komponentenbibliothek installieren oder den Komponentencode vollständig selbst besitzen. Gestylte Komponentenbibliotheken — MUI, Mantine, Chakra UI, Ant Design — liefern Ihnen ein ausgefeiltes, thematisierbares Design-System als Abhängigkeit, die Sie im Laufe der Zeit aktualisieren. Das Eigentumsmodell, popularisiert durch shadcn/ui, kopiert den Komponentenquellcode stattdessen in Ihr Projekt.

Das Copy-Paste-Modell von shadcn/ui bedeutet, dass Sie den Komponentencode vollständig besitzen — es gibt keine versionierte Abhängigkeit zum Aktualisieren, keine Breaking-Change-Migration und keine Designentscheidungen des Bibliotheksautors, die Sie nicht überschreiben können — was sich architektonisch grundlegend von der Installation von MUI oder Mantine unterscheidet und erklärt, warum es zum Standard für Teams geworden ist, die eigene Design-Systeme auf Tailwind aufbauen. Es hat über 110.000 GitHub-Sterne erreicht.

// Eigentumsmodell: Button liegt in Ihrem Repo, Sie bearbeiten ihn direkt.
import { Button } from '@/components/ui/button'

// Abhängigkeitsmodell: Button kommt aus einem versionierten Paket.
import { Button } from '@mui/material'

shadcn/ui baut seine Komponenten auf Headless-Primitiven auf, und das Standard-Primitiv ist Radix. Laut der shadcn/ui-Dokumentation wurde Base UI Anfang 2026 als offizielles alternatives Primitiv hinzugefügt, Radix bleibt jedoch das empfohlene Standard.

Radix wird seit der Übernahme von Modulz durch WorkOS im Jahr 2022 von WorkOS gepflegt, und einige Entwickler nehmen wahr, dass sein Release-Rhythmus langsamer geworden ist — Kontext dafür, warum Base UI (vom MUI-Team) als Alternative erschienen ist — obwohl shadcn/ui weiterhin standardmäßig Radix verwendet, das aktiv gepflegt und unter MIT als Open Source verfügbar bleibt. Wählen Sie Base UI, wenn Sie Primitive aus der MUI/Floating-UI-Linie und Flexibilität bei der Styling-Engine wünschen; wählen Sie eine vollständig gestylte Bibliothek wie Ant Design, wenn Sie datenlastige Enterprise-Oberflächen erstellen und sofort einsatzbereite Tabellen, Formulare und Datumsauswähler benötigen, anstatt sie selbst zusammenzusetzen.

React-Formularbibliotheken

React Hook Form ist der Standard für Formulare in modernem React. Sein Design ist unkontrolliert: Felder registrieren sich über Refs, anstatt jeden Tastendruck im React-State zu halten, was Re-Renders von Grund auf minimiert. Mit Validierung über Schema-Resolver ist die typische Kombination React Hook Form plus Zod für Runtime-Validierung und abgeleitete Typen.

import { useForm } from 'react-hook-form'

const { register, handleSubmit } = useForm()

Laut der React Hook Form-Dokumentation verbindet register ein Feld mit dem Formular, ohne es kontrolliert zu machen. Da der React Compiler automatisch memoiert, entfällt die manuelle Callback-Memoierung, die Integrationscode früher rund um Field-Handler benötigte, was die Verdrahtung weiter vereinfacht. Wählen Sie TanStack Form, wenn Sie vollständig typsichere Behandlung von komplexem, tief verschachteltem Formular-State benötigen; wählen Sie Conform, wenn Sie progressiv verbesserte Formulare rund um Server Actions entwickeln. Formik und React Final Form sind praktisch nicht mehr gepflegt — vermeiden Sie sie für neue Projekte.

Ein häufiges Produktionsproblem bei Formularen ist übermäßiges Re-Rendering durch kontrollierte Eingaben, die bei jedem Tastendruck den State aktualisieren. Das unkontrollierte Modell erzeugt weniger Zwischenzustandsereignisse, was sich in Session-Replays als sauberere Interaktionsspuren zeigt — weniger redundante Renders zwischen dem Tippen eines Benutzers und dem Absenden des Formulars.

React-Animationsbibliotheken

Motion ist die De-facto-Standard-Animationsbibliothek für React. Motion — die Bibliothek, die früher als Framer Motion bekannt war — verwendet den Paketnamen motion und den Import-Pfad motion/react, erreichte mit v12 volle React-19-Unterstützung und verzeichnet rund 30 Millionen npm-Downloads pro Monat.

Die deklarative API deckt mit den Props initial und animate den Großteil der App-Anforderungen ab:

import { motion } from 'motion/react'

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

Laut der Motion-Dokumentation deckt sie Gesten, Layout-Übergänge und AnimatePresence für Exit-Animationen ab. Ein wichtiger Barrierefreiheitshinweis: Respektieren Sie die prefers-reduced-motion-Media-Query, die MDN als Standardsignal dokumentiert, dass ein Benutzer minimierte Bewegung wünscht — Motion ermöglicht es Ihnen, sie auszulesen und Animationen entsprechend zu steuern. Wählen Sie react-spring, wenn Sie physikbasierte Federanimation als Kernmodell wünschen; wählen Sie GSAP, wenn Sie feingranulare Timeline-Orchestrierung über viele Elemente hinweg benötigen.

Ergänzende Bibliotheken: Auth, Testing, Charts und i18n

Über den Kernstack hinaus runden einige Kategorien die meisten Apps ab — jeweils ein sinnvoller Standard:

• Authentifizierung: Auth.js
• Testing: Vitest für Unit-Tests, Playwright für End-to-End
• Charts: Recharts
• Internationalisierung: i18next

Jede dieser Kategorien ist ein eigenes umfangreiches Thema; betrachten Sie diese als Ausgangspunkte und folgen Sie von dort aus der jeweiligen Dokumentation.

Der React-Stack 2026 auf einen Blick

Für eine Next.js-16-App ergeben sich heute folgende kompatible Standards nach Einsatzzweck:

Fazit

Die Fluktuation ist real, aber der Entscheidungsraum ist klein: Wählen Sie die richtige Kategorie für Ihren State, rufen Sie Daten auf dem Server ab, wenn Ihr Framework das erlaubt, setzen Sie standardmäßig auf Tailwind und shadcn/ui für die UI-Schicht, und greifen Sie für Animation und Formulare auf Motion und React Hook Form zurück. Die zwei Veränderungen, die Sie jetzt verinnerlichen sollten, sind: Der React Compiler entfernt den Großteil der manuellen Memoierung aus Ihrem Integrationscode, und RSC-Kompatibilität ist ein harter Filter — Runtime-CSS-in-JS und noch nicht stabile RSC-Unterstützung schränken ein, was in eine Next.js-16-App passt. Beginnen Sie mit diesen Standards und wechseln Sie zu einer Alternative nur dann, wenn eine spezifische Anforderung — GraphQL-Skalierung, typsicheres Routing, Physikanimation — es tatsächlich erfordert.

FAQs

Kann ich styled-components mit React Server Components verwenden?

styled-components funktioniert mit React Server Components nur hinter einer 'use client'-Grenze, da es Styles zur Laufzeit im Browser injiziert, was mit dem Server-Render-Modell von RSC kollidiert. Die Bibliothek ist seit März 2025 im Maintenance-Modus und wird für neue Projekte nicht empfohlen, veröffentlicht aber weiterhin Releases und hat RSC-kompatibles CSS-Variable-Theming hinzugefügt. Für neue RSC-Apps sind Tailwind CSS v4 oder CSS Modules die kompatiblen Standards, da beide Styles zur Build-Zeit statt zur Laufzeit erzeugen.

Was ist der Unterschied zwischen dem Eigentumsmodell von shadcn/ui und der Installation einer Bibliothek wie MUI?

shadcn/ui kopiert den Komponentenquellcode direkt in Ihr Projekt, sodass Sie die Dateien vollständig besitzen und bearbeiten können, ohne eine versionierte Abhängigkeit aktualisieren oder Breaking-Change-Migrationen durchführen zu müssen. MUI und Mantine werden als versionierte Pakete installiert, die Sie importieren und im Laufe der Zeit aktualisieren, wobei Sie Anpassungskontrolle gegen verwaltete Updates eintauschen. Das Eigentumsmodell eignet sich für Teams, die eigene Design-Systeme aufbauen und vollständige Kontrolle über Anpassungen wünschen; das Abhängigkeitsmodell eignet sich für Teams, die ein ausgefeiltes, gepflegtes Design-System ohne eigenen Code wünschen.

Wann sollte ich Zustand statt useState für Client-State verwenden?

Verwenden Sie Zustand, wenn State über weit entfernte Komponenten geteilt werden muss, die keine direkte Eltern-Kind-Beziehung haben, wie ein Warenkorb, ein Theme oder Session-Daten, auf die von vielen Stellen zugegriffen wird. Verwenden Sie useState oder useReducer für State, der lokal zu einer Komponente oder einem kleinen Teilbaum gehört, wie Formularentwürfe und Toggles. Zustand für rein lokalen State zu verwenden, fügt Indirektion ohne Nutzen hinzu, während wirklich globaler State in Prop-Drilling oder Context unnötige Re-Render- und Kopplungsprobleme erzeugt.

Ersetzt der React Compiler TanStack Query oder eine State-Management-Bibliothek?

Nein. React Compiler 1.0, stabil seit dem 7. Oktober 2025, memoiert Komponenten und Hook-Werte automatisch zur Build-Zeit und entfernt die meisten manuellen useMemo- und useCallback-Aufrufe, verwaltet aber kein Server-State-Caching, keine Hintergrund-Refetches oder komponentenübergreifende State-Verwaltung. Sie benötigen weiterhin TanStack Query für Server State und Zustand oder useState für Client-State. Der Compiler verändert, wie viel manuelle Feinabstimmung diese Integrationen erfordern, nicht ob Sie die Bibliotheken selbst benötigen.