Informatik Webentwicklung – State Management und Hooks
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was versteht man unter State Management in React? · Wann löst useState einen Re-Rende…
Karten
15 KartenWas versteht man unter State Management in React?
Rückseite
State Management bezeichnet die Verwaltung und Synchronisation von Anwendungsdaten über Komponenten hinweg – lokal, global oder serverseitig.
Wann löst useState einen Re-Render der Komponente aus?
Rückseite
Nur wenn der neue State-Wert per Object.is-Vergleich vom aktuellen abweicht – funktionale Updates vermeiden veraltete Closures.
Wie unterscheidet sich useReducer von useState bei komplexer Logik?
Rückseite
useReducer bündelt State-Übergänge in einer Reducer-Funktion, macht Seiteneffekte testbar und eignet sich für abhängige oder verschachtelte Updates.
Welche Rolle spielt der Dependency-Array in useEffect?
Rückseite
Er steuert, wann der Effect läuft: leer = einmal beim Mount, Werte = bei Änderung, fehlend = nach jedem Render.
Was bewirkt die Cleanup-Funktion in useEffect?
Rückseite
Sie wird vor dem nächsten Effect-Lauf und beim Unmount ausgeführt – ideal für Abonnements, Timer oder Event-Listener-Abmeldung.
Welches Problem löst die Context API in React?
Rückseite
Sie verhindert Prop Drilling, indem Daten über einen Provider global im Komponentenbaum bereitgestellt werden, ohne jede Ebene explizit zu durchlaufen.
Wann sollte man Context API statt Redux für Global State nutzen?
Rückseite
Bei selten wechselnden, einfachen Daten (Theme, Auth, Locale) – bei häufigen Updates oder komplexer Logik skaliert Redux besser.
Was sind die drei Kernprinzipien von Redux?
Rückseite
Single Source of Truth (ein Store), State ist read-only, Änderungen erfolgen durch pure Reducer-Funktionen.
Wie vereinfacht Redux Toolkit die Redux-Entwicklung?
Rückseite
Es bietet createSlice für Reducer/Actions, configureStore mit Defaults, Immer für immutable Updates und RTK Query für Server-State.
Was unterscheidet Server State von Client State in Web-Apps?
Rückseite
Server State stammt vom Backend (Caching, Synchronisation nötig), Client State ist rein lokal (UI-Status, Formulare) – Tools wie TanStack Query managen Server State.
Wann lohnt sich Zustand gegenüber Redux für Global State?
Rückseite
Bei mittlerer Komplexität: zustand ist minimalistisch (1 KB), hook-basiert, braucht keine Provider und erlaubt transient Updates ohne Re-Renders.
Wie vermeidet man Stale Closures in useEffect bei Async-Operationen?
Rückseite
Nutze funktionale State-Updates, refs für aktuelle Werte oder cleanup-Flags (abortController), um veraltete Variablen im Closure zu umgehen.
Was bewirkt der zweite Parameter bei useState-Lazy-Initialization?
Rückseite
Eine Funktion wird nur beim initialen Render ausgeführt – teure Berechnungen (Parsing, lokale Speicher) laufen nicht bei jedem Re-Render.
Wie erstellt man einen Custom Hook für wiederverwendbare State-Logik?
Rückseite
Extrahiere useState/useReducer/useEffect in eine Funktion mit 'use'-Präfix – sie kapselt Logik, gibt State und Setter zurück und ist testbar.
Welche Vorteile bietet useTransition für UI-State bei teuren Updates?
Rückseite
Markiert State-Änderungen als nicht-dringend, hält UI responsiv, zeigt Pending-Indikator und verhindert Blocking der Haupt-Interaktion.