React State Management: Redux, Zustand und Context API

State Management: Das Herzstück jeder React-App

Je größer eine React-Anwendung wird, desto wichtiger wird eine durchdachte State-Management-Strategie. Lokaler State mit useState reicht für einfache Komponenten, aber bei komplexen Datenflüssen braucht es mehr.

Option 1: React Context API

Die Context API ist in React eingebaut und erfordert keine zusätzlichen Bibliotheken. Sie eignet sich hervorragend für Daten, die sich selten ändern – etwa Theme-Einstellungen, Sprachauswahl oder Authentifizierungsstatus.

const ThemeContext = createContext('light');

• Vorteile: Kein Zusatzpaket nötig, einfache API
• Nachteile: Performance-Probleme bei häufigen Updates, da alle Consumer neu rendern
• Empfehlung: Für globale, selten geänderte Werte

Performance-Falle bei Context

Ein häufiger Fehler ist es, den gesamten Anwendungsstate in einen einzigen Context zu packen. Jede Änderung erzwingt dann ein Re-Render aller verbundenen Komponenten. Die Lösung: State in mehrere, spezialisierte Contexts aufteilen.

Option 2: Redux Toolkit

Redux Toolkit (RTK) ist die offizielle, empfohlene Art, Redux zu nutzen. Es reduziert den berüchtigten Boilerplate-Code drastisch und bringt nützliche Werkzeuge wie createSlice und createAsyncThunk mit.

• Vorteile: Vorhersagbarer Datenfluss, exzellente DevTools, RTK Query für API-Calls
• Nachteile: Steile Lernkurve für Anfänger, mehr Code als Alternativen
• Empfehlung: Für große Anwendungen mit komplexem State

Redux Toolkit hat den alten Redux-Boilerplate-Wahnsinn beendet. Mit createSlice schreibt man Reducer, Actions und Action Creators in einem Schritt.

Option 3: Zustand

Zustand ist eine minimalistische State-Management-Bibliothek, die auf Einfachheit setzt. Mit wenigen Zeilen Code lässt sich ein globaler Store erstellen, der performant und typsicher ist.

const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }))

• Vorteile: Minimale API, keine Provider nötig, hervorragende Performance
• Nachteile: Weniger Middleware-Ökosystem als Redux
• Empfehlung: Für kleine bis mittlere Anwendungen

Vergleichstabelle

• Bundle-Größe: Context (0 KB) / Zustand (~1 KB) / Redux Toolkit (~12 KB)
• Lernkurve: Context (niedrig) / Zustand (niedrig) / Redux (mittel-hoch)
• DevTools: Context (begrenzt) / Zustand (gut) / Redux (exzellent)
• TypeScript-Support: Alle drei bieten guten TS-Support

Server State: Eine eigene Kategorie

Daten vom Server sollten getrennt vom UI-State verwaltet werden. Libraries wie TanStack Query (ehemals React Query) oder RTK Query übernehmen Caching, Revalidierung und Loading-States automatisch.

Laut heise online setzen immer mehr Entwicklerteams auf die Trennung von Client- und Server-State als architektonisches Grundprinzip.

Entscheidungshilfe

• Kleine App, wenig globaler State: Context API + useState
• Mittlere App, moderater State: Zustand
• Große App, komplexer State, Team: Redux Toolkit
• Server-Daten: TanStack Query oder RTK Query

Fazit

Es gibt keine universelle Lösung für State Management in React. Die Context API deckt einfache Fälle ab, Zustand bietet einen pragmatischen Mittelweg, und Redux Toolkit glänzt bei großen, komplexen Anwendungen. Wichtig ist, den Server-State separat zu behandeln und die Lösung an die tatsächliche Komplexität anzupassen – nicht an die vermutete.