byteNative
Frontend

Zustand

Minimalistisches State-Management ohne Boilerplate.

Was ist Zustand?

Zustand ist ein bewusst minimalistisches State-Management für React, das ohne umständliches Beiwerk und ohne tief verschachtelte Provider auskommt. Du legst einen Store als einfache Funktion an und liest daraus mit einem Hook, das war es im Kern schon. Es bleibt klein und verständlich, selbst wenn der Zustand einer Anwendung wächst. Wir nutzen es für lokalen UI-Zustand, den sich mehrere Komponenten teilen müssen, ohne gleich eine schwere Lösung aufzufahren.

Mehr in der Dokumentation

Wofür wir es nutzen

Wenn ein Stück UI-Zustand über mehrere Komponenten hinweg geteilt werden muss, etwa ein offenes Panel oder ein Filter, greifen wir zu Zustand. Es ist schnell aufgesetzt und bleibt lesbar, ohne dass wir die App in Provider verpacken. Für Server-Daten nehmen wir bewusst TanStack Query, Zustand bleibt beim lokalen Zustand.

ts
import { create } from "zustand";

export const useStore = create((set) => ({
    count: 0,
    increment: () => set((s) => ({ count: s.count + 1 })),
}));
ein store mit zustand und aktion

Gut zu wissen

Lies im Hook immer nur die einzelnen Felder aus, die eine Komponente braucht, statt des ganzen Stores. Sonst rendert die Komponente bei jeder Änderung neu, auch bei Feldern, die sie gar nicht nutzt.

00Frontend

Weitere Werkzeuge, mit denen wir im selben Bereich arbeiten.

Welche Technologie passt zu dir?

Das musst du nicht entscheiden, das ist unser Job. Erzähl uns einfach von deinem Vorhaben.