Zustandsverwaltung-Debugger

Das Problem

UI-State-Bugs sind einzigartig frustrierend — die Komponente rendert, aber mit alten Daten. Ein Click-Handler nutzt eine veraltete Closure, ein abgeleiteter Wert ist nicht synchron, ein Eltern-Re-Render setzt den Kind-State zurueck. React DevTools zeigen, der State sieht korrekt aus, aber die Komponente verhaelt sich, als lebe sie in der Vergangenheit. Diese Bugs entstehen aus der Kluft zwischen mentalem Modell und dem tatsaechlichen Reaktivitaetssystem.

Der Prompt

Du bist ein UI-State-Debugging-Spezialist. Diagnostiziere diesen Zustandsverwaltungs-Fehler:

FRAMEWORK: [React/Vue/Svelte + Version]
STATE-BIBLIOTHEK: [useState/useReducer/Redux/Zustand/Pinia/Vuex/Signals — oder keine]
SYMPTOM: [z.B. "zeigt veraltete Daten nach Update", "Komponente re-rendert 50x", "State wird bei Navigation zurueckgesetzt"]

KOMPONENTEN-CODE:
[Komponente mit State-Logik, Effects und Event-Handlern einfuegen]

State-Problem diagnostizieren:
1. **State-Flow-Map**: Jede State-Variable von Deklaration → Mutation → Verwendung verfolgen. Vollstaendiges Datenflussdiagramm.
2. **Render-Trigger-Analyse**: Was loest Re-Renders dieser Komponente aus? Jeden Trigger auflisten.
3. **Closure-Audit**: Fuer jeden Callback und Effect auflisten, welche State-Variablen eingefangen werden. Sind welche veraltet zum Zeitpunkt der Ausfuehrung?
4. **Update-Batching**: Werden mehrere setState-Aufrufe gebatcht oder sequentiell verarbeitet? Ist die Reihenfolge relevant?
5. **Abgeleiteter State-Check**: Wird State aus anderem State abgeleitet statt berechnet? Das ist die #1-Quelle fuer State-Sync-Bugs.
6. **Der Fix**: Korrigierten State-Management-Ansatz liefern mit Erklaerung des verletzten Reaktivitaetsprinzips.

Beispiel-Ausgabe

State-Flow: count (useState) → angezeigt in <span> UND eingefangen von setInterval-Callback
Closure-Bug: setInterval-Callback faengt count=0 beim Mount ein. Jeder Tick liest den veralteten Initialwert.
Fix Option A: Functional Updater verwenden: setCount(prev => prev + 1) — haengt nicht vom Closure-Wert ab
Fix Option B: useRef fuer aktuellen count verwenden, Ref in useEffect aktualisieren, ref.current im Interval lesen
Empfohlen: Option A — einfachster Ansatz, keine zusaetzlichen Refs, immer korrekt

Wann verwenden

Diesen Skill einsetzen, wenn UI-Komponenten veraltete Daten anzeigen, State-Updates sich nicht im UI widerspiegeln, Komponenten exzessiv re-rendern, oder State-Synchronisation zwischen Eltern- und Kind-Komponenten bricht.

Profi-Tipps

• React DevTools Profiler nutzen — zeigt genau, warum jede Komponente re-gerendert wurde. Grenzt die Untersuchung sofort ein.
• Die veraltete Closure ist IMMER die Antwort in React — wenn ein Callback den falschen Wert hat, hat er State zum Erstellungszeitpunkt eingefangen. Functional Updaters oder Refs verwenden.
• Abgeleiteter State sollte berechnet werden, nicht gespeichert — wenn State B immer eine Funktion von State A ist, nicht in useState speichern. Waehrend des Renders berechnen.
• State-Updates sind asynchron — State sofort nach dem Setzen lesen gibt den ALTEN Wert zurueck.