⚡React State

Zustand State Management

Globaler State ohne Boilerplate — April 2026

Redux ist overkill, Context re-rendert zu viel, und useReducer wird schnell unübersichtlich. Zustand ist die goldene Mitte: minimaler Boilerplate, maximale Performance. Ein Store in 5 Zeilen, fertig.

Pro-Tip — Der schnelle Weg

Zustand re-rendert nur Komponenten die den spezifischen State-Slice nutzen den du selektierst — nicht die ganze App.

Seite 1

Zustand installieren und Store erstellen

Ein Zustand-Store ist eine einzige Funktion — kein Provider, kein Boilerplate.

npm install zustand

// stores/use-counter.ts
import { create } from "zustand";

interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}

export const useCounter = create<CounterStore>((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
decrement: () => set((s) => ({ count: s.count - 1 })),
reset: () => set({ count: 0 }),
}));

Store in Komponenten nutzen

Importiere den Hook und nutze ihn direkt — kein Provider nötig.

// components/counter.tsx
"use client";
import { useCounter } from "@/stores/use-counter";

export function Counter() {
const count = useCounter((s) => s.count);
const increment = useCounter((s) => s.increment);
return (
<div>
<span>{count}</span>
<button onClick={increment}>+1</button>
</div>
);
}

// WICHTIG: Selektoren nutzen!
// RICHTIG: useCounter((s) => s.count)
// FALSCH: useCounter() ← re-rendert bei JEDER Aenderung

Persistenz und Middleware

Speichere den State automatisch im LocalStorage mit der persist Middleware.

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useSettings = create(
persist(
(set) => ({
theme: "dark",
language: "de",
setTheme: (theme: string) => set({ theme }),
setLanguage: (lang: string) => set({ language: lang }),
}),
{ name: "settings-storage" }
)
);

Seite 2

Warum das funktioniert

Minimaler Boilerplate: ein Store ist eine einzige Funktion
Granulare Re-Renders: nur betroffene Komponenten updaten sich
Kein Provider-Wrapping: Store importieren und direkt nutzen
TypeScript-First: volle Typsicherheit ohne Extra-Aufwand

Tipps

Immer Selektoren nutzen: useStore(s => s.value) statt useStore() für Performance
Kein Provider nötig — Zustand funktioniert außerhalb von React-Komponenten
persist Middleware speichert automatisch in LocalStorage
devtools Middleware für Redux DevTools Kompatibilität
Zustand funktioniert auch in Server-Actions und API Routes

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen